反应不使用对象数组的setState更新状态 [英] React not updating state with setState with Array of object

问题描述

我要创建此表，如下图所示.单击编辑按钮时，应更改为文本字段，然后单击确认按钮，应再次转换为trtd标签.

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

I want to create this table shown in image below. When Click on edit button It should change to textfield and pressing on confirm button it should again transform to tr td tags.

here is my code for the same. I have created Array of objects in which i have id property, name property and value property. On edit button click, it should change to textfield and on confirm button click the value of textfield should update in array of objects.

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;

推荐答案

您要更改相同的引用，则需要呈现一个副本，否则该组件将无法呈现(浅比较):

You mutating the same reference, you need to render a copy or the component won't render (shallow comparison):

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

或者只是更改为:

setRegisterData([...datas])

这篇关于反应不使用对象数组的setState更新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！