反應不使用帶有 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])