reactjs - 使用钩子(Hook)编辑 React Material 表

Question

我正在尝试使用 React Hooks 编辑/删除 Material 表中的一行。虽然我可以看到状态正在被修改，但它并没有重新渲染 Material 表。 useEffect 在 setdata 之后没有触发。

import React, { useState, useEffect } from "react";
import faker from "faker";
import MaterialTable from "material-table";
import * as _ from "lodash";

let testData = [];

for (var i = 0; i < 100; i++) {
    testData.push({
        _id: i,
        fullName: faker.name.findName(),
        "email.address": faker.internet.email(),
        phone_number: faker.phone.phoneNumber(),
        address: {
            city: faker.address.city(),
            state: faker.address.state(),
            country: faker.address.country()
        }
    });
}

let columndata = [
    { title: "Id", field: "_id" },
    { title: "Name", field: "fullName" },
    { title: "Email", field: "email.address" },
    { title: "Phone", field: "phone_number" },
    { title: "City", field: "address.city" },
    { title: "State", field: "address.state" },
    { title: "Country", field: "address.country" }
];

const MyDataGrid = () => {
    let [data, setData] = useState(testData);

    useEffect(() => {
        debugger;
        if (data.length < 100) {
            console.log(data.length);
        }
    }, [data]);

    return (
        <MaterialTable
            columns={columndata}
            data={data}
            title="test-table"
            options={{
                filtering: true,
                sorting: true,
                exportButton: true,
                grouping: true
            }}
            editable={{
                onRowDelete: oldData =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {
                            let newData = data;
                            _.remove(newData, { _id: oldData._id });
                            debugger;
                            setData(newData);
                            resolve();
                        }, 1000);
                    })
            }}
        />
        // <button onClick={() => setData(_.remove(data, row => row._id !== 3))}>
        //     Click me
        // </button>
    );
};

export default MyDataGrid;

上面的代码最初呈现良好。但是，当我尝试删除该行时，数据已删除一行，但 useEffect 不会触发，并且 MaterialTable 组件不会使用新数据呈现。但是，如果我使用注释掉的代码，则 useEffect 在删除后会正常触发。我错过了什么？

Answer 1

你不应该改变你的数据来触发 useEffect 钩子(Hook)或者在一般情况下使用 props 和 state。问题是，你将同一个对象设置到你的状态 Hook ，只是发生了变化。对象引用是相同的，useEffect 将假定没有任何改变。像这样写:

new Promise((resolve, reject) => {
                    setTimeout(() => {
                        setData(data.filter(row => row._id !== oldData ._id);
                        resolve();
                    }, 1000);
                })

过滤器将返回一个新数组，但所选项目将被删除。现在数据是一个新数组，这将触发 useEffect 钩子(Hook)，因为新旧对象的引用不同。

_.remove(data, row => row._id !== 3)) 也返回一个新的数组，比如更新钩子(Hook)不可变的过滤器。这将触发 useEffect Hook 并导致重新渲染。 希望这可以帮助。快乐编码。