Реагировать не обновляя состояние с помощью setState с массивом объекта

Question

Я хочу создать эту таблицу, показанную на рисунке ниже. При нажатии на кнопку «Изменить» он должен измениться на текстовое поле, а при нажатии на кнопку «Подтвердить» он снова должен трансформироваться в теги tr td. вот мой код для того же. Я создал массив объектов, в которых у меня есть идентификатор свойства, имя свойства и значение свойства. При нажатии кнопки редактирования, оно должно измениться на текстовое поле, а при нажатии кнопки подтверждения значение текстового поля должно обновиться в массиве объектов.

import React, { useState } from "react";
import style from "./css/Register.module.css";
import { Table, Button, Icon, TextInput } from "react-materialize";

const ManipulateRegister = () => {
  const [RegisterData, setRegisterData] = useState([
    {
      id: 0,
      name: "W Register",
      value: 0,
      isEdit: false,
    },
    {
      id: 1,
      name: "Z Register",
      value: 0,
      isEdit: false,
    },
    {
      id: 2,
      name: "B Register",
      value: 0,
      isEdit: false,
    },
    {
      id: 3,
      name: "C Register",
      value: 0,
      isEdit: false,
    },
  ]);

  const handleRegisterEditBtn = (register) => {
    var datas = RegisterData;
    datas.forEach((data) => {
      if (data.id === register.id) {
        data.isEdit = true;
      }
    });
    console.log(datas);
    setRegisterData(datas);
  };

  return (
    <div className={style.addressWrapper}>
      <div className={style.addressTableWrapper}>
        <Table centered hoverable responsive striped>
          <thead className="orange lighten-2">
            <tr>
              <th data-field="Namee">Register Name</th>
              <th data-field="value">Value</th>
              <th data-field="action">Action</th>
            </tr>
          </thead>
          <tbody>
            {RegisterData.map((register) => (
              <tr>
                {register.isEdit ? (
                  <div>
                    <TextInput type="number" placeholder="Enter Value" />
                    <Button small waves style={{ margin: "20px" }}>
                      Submit
                    </Button>
                    <Button small waves className="red lighten-2">
                      Cancel
                    </Button>
                  </div>
                ) : (
                  <React.Fragment>
                    <td>{register.name}</td>
                    <td>{register.value}</td>
                    <td>
                      <Button
                        floating
                        icon={<Icon>edit</Icon>}
                        onClick={() => handleRegisterEditBtn(register)}
                      />
                    </td>
                  </React.Fragment>
                )}
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
      <Button node="button" className="red lighten-1" waves="light">
        Reset
      </Button>
    </div>
  );
};
export default ManipulateRegister;

Answer 1

Вы передаете одну и ту же ссылку, вам нужно сделать копию, или компонент не будет отображаться (поверхностное сравнение):

const handleRegisterEditBtn = (register) => {
  const data = RegisterData.map((data) =>
    data.id === register.id ? { ...data, isEdit: true } : data
  );
  setRegisterData(datas);
};

Или просто измените на:

setRegisterData([...datas])