Javascript 如果在 ReactJS 中添加了模式，删除按钮不会读取 id

我是新手，我不知道我的解释是否正确，我的理论是，问题是:你为每一条记录渲染了模式，只剩下最后一个模式.

我将该模式置于循环之外，并声明了一个useState来跟踪要删除的选定id，它有效=D

Read.js :

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Table, Button, List, Popup, Grid, Icon, Dropdown, Menu, Header } from "semantic-ui-react";
import { useNavigate, Link } from "react-router-dom";
import * as MdIcons from "react-icons/md";
import * as AiIcons from "react-icons/ai";
import * as FiIcons from "react-icons/fi";
import { Modal, ModalFooter, ModalHeader, ModalBody } from "reactstrap";
import SideMenu from "../SideMenu/SideMenu";

function Read() {
  const [APIData, setAPIData] = useState([]);
  const [idToDelete, setIdToDelete] = useState(0);

  useEffect(() => {
    axios.get(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud`).then((response) => {
      console.log(response.data);
      setAPIData(response.data);
    });
  }, []);

  const setData = (data) => {
    let {
      id,
      image,
      companyName,
      email,
      companyNumber,
      uniqueNumber,
      lineofBusiness,
      companyRevenue,
      openingTime,
      closingTime,
      discount,
      rating,
      address1,
      address2,
      pincode,
      area,
      city,
      state,
      country,
    } = data;

    localStorage.setItem("ID", id);
    localStorage.setItem("Image", image);
    localStorage.setItem("Email", email);
    localStorage.setItem("Company Name", companyName);
    localStorage.setItem("Company Number", companyNumber);
    localStorage.setItem("Unique Number", uniqueNumber);
    localStorage.setItem("Line of Business", lineofBusiness);
    localStorage.setItem("Company Revenue", companyRevenue);
    localStorage.setItem("Opening Time", openingTime);
    localStorage.setItem("Closing Time", closingTime);
    localStorage.setItem("Discount", discount);
    localStorage.setItem("Rating", rating);
    localStorage.setItem("Address1", address1);
    localStorage.setItem("Address2", address2);
    localStorage.setItem("Pincode", pincode);
    localStorage.setItem("Area", area);
    localStorage.setItem("City", city);
    localStorage.setItem("State", state);
    localStorage.setItem("Country", country);
  };

  const getData = () => {
    axios.get(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud`).then((getData) => {
      setAPIData(getData.data);
    });
  };

  const onDelete = () => {
    axios
      .delete(`https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud/${idToDelete}`)
      .then(() => {
        navigate("/company/list");
        toggle();
      })
      .then(() => {
        getData();
      });
  };

  let navigate = useNavigate();

  const addUser = () => {
    navigate("/company/create");
  };

  const [open, setOpen] = useState(false);

  const toggle = () => setOpen(!open);

  const [search, setSearch] = useState("");

  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-lg-12" style={{ marginLeft: "-11px" }}>
            <SideMenu />
          </div>
        </div>
        <div className="row">
          <div className="col-lg-3"></div>
          <div className="col-lg-6">
            <Button primary style={{ width: "150px", height: "40px" }} onClick={addUser}>
              Add Company
            </Button>

            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search by any Category"
              style={{
                position: "absolute",
                width: "260px",
                height: "40px",
                marginLeft: "285px",
                border: "none",
                fontSize: "15px",
                padding: "8px",
                borderRadius: "20px 20px 20px 20px",
              }}
            />
            <table style={{ width: "700px", height: "200px" }}>
              <thead style={{ margin: "50px" }}>
                <tr>
                  <th style={{ textAlign: "center" }}>List of Companies</th>
                </tr>
              </thead>
              {APIData.filter((data) =>
                Object.values(data).some((value) => value.toLowerCase().includes(search.toLowerCase()))
              ).map((data, id) => {
                return (
                  <>
                    <tbody key={id}>
                      <li
                        style={{
                          minHeight: "140px",
                          borderRadius: "5px",
                          margin: "20px 0px",
                          listStyle: "none",
                          padding: "25px",
                          backgroundColor: "white",
                          boxShadow: "0 0 20px 0px rgba(0,0,0,0.2)",
                        }}
                      >
                        <tr>
                          <Link to="/company/view">
                            <button
                              style={{
                                background: "transparent",
                                border: "none",
                                color: "blue",
                              }}
                              onClick={() => setData(data)}
                            >
                              {data.companyName}
                            </button>
                          </Link>
                        </tr>
                        <tr>{data.companyNumber}</tr>
                        <tr>{data.uniqueNumber}</tr>
                        <tr>{data.lineofBusiness}</tr>
                      </li>
                      <div
                        style={{
                          position: "absolute",
                          marginLeft: "580px",
                          marginTop: "-120px",
                        }}
                      >
                        <Dropdown
                          icon={
                            <AiIcons.AiOutlineEllipsis
                              style={{
                                color: "black",
                                fontSize: "1.3rem",
                                marginTop: "15px",
                                marginLeft: "30px",
                                border: "1px solid black",
                                width: "30px",
                                height: "30px",
                                borderRadius: "50%",
                              }}
                            />
                          }
                          pointing="top right"
                        >
                          <Dropdown.Menu>
                            <Dropdown.Item icon="edit" text="Edit">
                              <Link to="/company/edit">
                                <button
                                  onClick={() => setData(data)}
                                  style={{
                                    background: "transparent",
                                    border: "none",
                                  }}
                                >
                                  <FiIcons.FiEdit color="black" fontSize="1.3rem" /> Edit
                                </button>
                              </Link>
                            </Dropdown.Item>
                            <Dropdown.Item icon="delete" text="Delete">
                              <button
                                onClick={() => {
                                  setIdToDelete(data.id);
                                  toggle();
                                }}
                                style={{
                                  background: "transparent",
                                  border: "none",
                                }}
                                color="red"
                              >
                                <MdIcons.MdDelete color="black" fontSize="1.3rem" />
                                delete
                              </button>
                            </Dropdown.Item>
                          </Dropdown.Menu>
                        </Dropdown>
                      </div>
                    </tbody>
                  </>
                );
              })}
            </table>

            <Modal isOpen={open} toggle={toggle}>
              <ModalHeader toggle={toggle}>Warning</ModalHeader>
              <ModalBody>Are you sure to delete this id from the list...</ModalBody>
              <ModalFooter>
                <Button color="red" onClick={onDelete}>
                  Okay
                </Button>
                <Button color="primary" onClick={toggle}>
                  Cancel
                </Button>
              </ModalFooter>
            </Modal>
          </div>
        </div>
      </div>
    </>
  );
}

export default Read;