反应不使用带有 object 数组的 setState 更新 state

Question

我想创建如下图所示的表。 单击编辑按钮时，它应该更改为文本字段并按下确认按钮，它应该再次转换为 tr td 标签。

这是我的代码。 我创建了对象数组，其中我有 id 属性、name 属性和 value 属性。 单击编辑按钮时，它应更改为文本字段，单击确认按钮时，文本字段的值应在对象数组中更新。

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 datas = RegisterData.map((data) =>
    data.id === register.id ? { ...data, isEdit: true } : data
  );
  setRegisterData(datas);
};

或者只是更改为：

setRegisterData([...datas])