React Material table 使用钩子编辑

Question

我正在尝试 edit/delete 在 material table 中使用反应挂钩。虽然我可以看到状态正在修改，但它不会重新呈现 material table。 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 挂钩或使用 props 和 state。问题是，你将同一个对象设置到你的状态挂钩，只是发生了变化。对象引用是相同的，useEffect 将假定没有任何改变。这样写：

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

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

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

React Material table 使用钩子编辑

React Material table editing using hooks

reactjs

react-hooks

material-table