Можете ли вы дать мне идею решить мою ошибку, когда я обновляю данные, только последний идентификатор элемента вносит изменения, даже если я нажимаю на первый идентификатор.

Модальный

 <Modal
    size="lg"
    show={UpShow}
    onHide={() => setUpShow(false)}
    aria-labelledby="contained-modal-title-vcenter"
    aria-describedby="transition-modal-description"
    className={classes.modal}
    >
    <Modal.Body>
        <div className="modal-background-color">
             <PurchaseUpdate requestType="put" id={PurchaseData.id} />
        </div>
    </Modal.Body>
</Modal>
  

Все работает хорошо, кроме обновления, у кого есть идея, пожалуйста, дайте мне знать.Спасибо

 POhandleformsubmit = (event, requestType, id) => {
    // event.preventDefault();
    const Item_no = event.target.elements.upItem_no.value;
    const Description = event.target.elements.upDescription.value;
    const Supplier = event.target.elements.upSupplier.value;
    const Unit_price = event.target.elements.upUnit_price.value;
    const Quantity = event.target.elements.upQuantity.value;

    console.log(Item_no, Description, Supplier, Unit_price, Quantity);

    switch (requestType) {
        case 'put':
            return axios.put(`http://127.0.0.1:8000/Purchase/PO/${id}/`, {
                Item_no: Item_no,
                Description: Description,
                Supplier: Supplier,
                Unit_price: Unit_price,
                Quantity: Quantity

            })
                .then(res => console.log(res))
                .catch(error => console.log(error));
    }

}
  

https://codesandbox.io/s/determined-visvesvaraya-5b87b?file=/src/App.js

Проблема

UpShow является логическим ( const [UpShow, setUpShow] = useState(false); ), поэтому, когда какой-либо отдельный PurchaseData элемент переключает значение ( onClick={() => setUpShow(PurchaseData.id)} ), тогда все модалы переключаются (поскольку они стоят в очереди из одного и того же значения состояния), а модальный элемент последнего отображенного PurchaseData элемента является самым верхним видимым. Когда модальный переключатель переключается на close, аналогично, все модалы закрываются.

Решение

Проверьте сохраненный PurchaseData.id , чтобы открыть какой-либо конкретный модальный.

 <Modal
  size="lg"
  show={UpShow === PurchaseData.id} // <-- match saved id with the current mapped id
  onHide={() => setUpShow(false)}
  aria-labelledby="contained-modal-title-vcenter"
  aria-describedby="transition-modal-description"
  className={classes.modal}
>
  <Modal.Body>
    <div className="modal-background-color">
      <PurchaseUpdate
        requestType="put"
        id={PurchaseData.id}
      />
    </div>
  </Modal.Body>
</Modal>