时间戳

首页 > 解决方案 > 渲染后如何访问特定的 array.map 项目？

reactjs - 渲染后如何访问特定的 array.map 项目？

问题描述

在我的应用程序中，如果用户请求收养宠物，我会呈现一个确认按钮。如何启用确认按钮以访问它所呈现的用户的 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;

标签： reactjsmappingarray-map

解决方案

代替

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;

推荐阅读