渲染后如何访问特定的 array.map 项？答案

【问题标题】：How can I access a specefic array.map item after render?渲染后如何访问特定的 array.map 项？
【发布时间】：2021-01-07 19:32:07
【问题描述】：

如果用户请求领养宠物，我会在我的应用中呈现一个确认按钮。如何启用确认按钮以访问它所呈现的用户的 ID？

import React, { useEffect, useState } from "react";
import { BACK_PORT } from "../../var";
import axios from "axios";
import { Button } from "react-bootstrap";

function UsersDashboard() {
  const [users, setUsers] = useState([]);
  const token = localStorage.getItem("auth-token");
  useEffect(() => {
    axios
      .get(`${BACK_PORT}/data/users`, { headers: { "auth-token": token } })
      .then(function (response) {
        setUsers(response.data);
      })
      .catch(function (error) {
      });
  }, [token]);

  const onConfirm = () => {
    //Send ID of user
  };

    return users.map((item) => (
    <div key={item._id}>
      <div>Username: {item.name}</div>
      {item.adoptionRequest && (
        <div>Adoption Request: {item?.adoptionRequest}</div>
      )}
      {item.adoptionRequest && (
        <div>
          <Button onClick={onConfirm}>Confirm</Button>
        </div>
      )}
      {item.adoptionRequest && <div>hello</div>}
    </div>
  ));
}

export default UsersDashboard;

【问题讨论】：

标签： reactjs mapping array-map

【解决方案1】：

替换

onClick={onConfirm}

与

onClick={() => onConfirm(item._id)}

import React, { useEffect, useState } from "react";
import { BACK_PORT } from "../../var";
import axios from "axios";
import { Button } from "react-bootstrap";

function UsersDashboard() {
  const [users, setUsers] = useState([]);
  const token = localStorage.getItem("auth-token");
  useEffect(() => {
    axios
        .get(`${BACK_PORT}/data/users`, { headers: { "auth-token": token } })
        .then(function (response) {
          setUsers(response.data);
        })
        .catch(function (error) {
        });
  }, [token]);

  const  onConfirm = (userId) => {
    console.log(userId)
    //Send ID of user
  };

  return users.map((item) => (
      <div key={item._id}>
        <div>Username: {item.name}</div>
        {item.adoptionRequest && (
            <div>Adoption Request: {item?.adoptionRequest}</div>
        )}
        {item.adoptionRequest && (
            <div>
              <Button onClick={() => onConfirm(item._id)}>Confirm</Button>
            </div>
        )}
        {item.adoptionRequest && <div>hello</div>}
      </div>
  ));
}

export default UsersDashboard;

【讨论】：

【解决方案2】：

我很困惑，因为按钮总是“启用”的，因此可以点击。

如果用户没有请求采用，我猜你想禁用按钮？

如果是这种情况，只需使用标签的disabled attribute

const onConfirm = (userId) => {
axios.get(`data/user/${userId}`);
//Send ID of user by accessing userId
};
<Button disabled={item.adoptionRequest === null} onClick={() => onConfirm(item._id)}>Confirm</Button>

【讨论】：

不不，我希望按钮在单击时访问与其相关的项目的用户 ID
哦，我明白按照@aolivera 的建议去做，并将 item._id 传递给 onConfirm 函数的参数，并在参数中添加一个 id 字段。我会更新我的答案。