在 react CRUD 操作中遇到一些错误？

Question

在我的代码中，我正在执行 CRUD 操作，问题是当我更新任何单个数据时它工作得很好，但是之后当我点击编辑按钮更新第二个数据并且没有改变那么它将保存以前的数据意味着我在第一个数据上编辑的数据也保存到第二个数据。 这是我的代码

import {
  Button,
  Card,
  Col,
  FormControl,
  InputGroup,
  Modal,
  Row,
  Table,
} from "@themesberg/react-bootstrap";
import TableRow from "../../../components/Tables";
import BootstrapTables from "../../tables/BootstrapTables";
import React, { useEffect, useState } from "react";

import axios from "axios";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const Bpm = () => {
  const [value, setValue] = useState([]);
  const [updateProductType, setupdateProductType] = useState("");

  const [show, setShow] = useState(false);
  const [addProduct, setaddProduct] = useState("");

  useEffect(() => {
    fetchData();
  }, []);


  const fetchData = async () => {
    await axios
      .get(`${process.env.REACT_APP_API_URL}/attributes/3`)
      .then((response) => {
        setValue(response.data);
      });
  };


 

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

 

  const [updateshow, updatesetShow] = useState(false);
  const [updateid, setupdateid] = useState({});

  const updatehandleClose = () => updatesetShow(false);
  const updatehandleShow = (_id, att_value) => {
    updatesetShow(true);
    setupdateid({ id: _id, att_value: att_value });
  };

  const handleUpdate = async () => {
    console.log(updateid, updateProductType, "update walli id");

    await axios
      .patch(`${process.env.REACT_APP_API_URL}/attributes/`, {
        _id: updateid.id,
        att_type: 3,
        att_value: updateProductType,
      })
      .then((res) => console.log("updated"));
    fetchData();
    updatehandleClose();
  };

  

  const attributeName = "BPM";

  return (
    <>
  

      <Card border="light" className="shadow-sm mb-4">
        <Card.Body className="pb-0">
          <Table
            responsive
            className="table-centered table-nowrap rounded mb-0"
          >
            <thead className="thead-light">
              <tr>
                <th className="border-0">#</th>
                <th className="border-0">BPM</th>
                <th className="border-0"></th>
              </tr>
            </thead>
            <tbody>
              {value.map((pt, index) => {
                const { att_value, _id } = pt;
                return (
                  <tr>
                    <td>
                      <Card.Link href="#" className="text-primary fw-bold">
                        {index + 1}
                      </Card.Link>
                    </td>
                    <td className="fw-bold">
                      <FontAwesomeIcon
                      // icon={sourceIcon}
                      // className={`icon icon-xs text-${sourceIconColor} w-30`}
                      />
                      {att_value}
                    </td>

                    <Modal show={updateshow} onHide={updatehandleClose}>
                      <Modal.Header closeButton>
                        <Modal.Title>{`Edit ${attributeName}`}</Modal.Title>
                      </Modal.Header>
                      <form onSubmit={() => handleUpdate()}>
                        <Modal.Body>
                          <InputGroup>
                            <FormControl
                              // placeholder={updateid.att_value}
                              defaultValue={updateid.att_value}
                              aria-label="Username"
                              aria-describedby="basic-addon1"
                              onChange={(e) =>
                                setupdateProductType(e.target.value)
                              }
                            />
                          </InputGroup>
                        </Modal.Body>
                        <Modal.Footer>
                          <Button
                            variant="secondary"
                            onClick={updatehandleClose}
                          >
                            Close
                          </Button>
                          <Button variant="primary" type="submit">
                            Save Changes
                          </Button>
                        </Modal.Footer>
                      </form>
                    </Modal>

                    <td style={{ width: "380px" }}>
                      <Row className="d-flex align-items-center">
                        <Col xs={12} xl={2} className="px-0">
                          <small className="fw-bold">
                            <Button
                              onClick={() => updatehandleShow(_id, att_value)}
                            >
                              Edit
                            </Button>
                          </small>
                        </Col>
                  
                      </Row>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </Table>
        </Card.Body>
      </Card>
    </>
  );
};

export default Bpm;

Answer 1

const handleUpdate = async () => { ... } 内的updateid 和updateProductType 是函数handleUpdate()创建时的值，而不是调用时的值。

解决方案是将当前值作为参数传递：

<form onSubmit={ () => handleUpdate( updateid, updateProductType ) }>