UseEffect with React-Table 除非刷新页面，否则不显示更改

Question

我是一名正在尝试学习 React 的 Java 开发人员，我遇到了这个问题，我更新了一个 table 以使用 react-table，现在，每当我添加或删除一个项目时从我的 api 响应中，我需要刷新整个页面才能看到发生的变化，而在我让 useEffect 立即显示这些变化之前。

下面是我删除几乎所有其他试图找到此问题根本原因的所有内容后的完整代码。如果我使用注释掉的 tbody 而不是使用 react-table 的 tbody，我仍然可以看到我的更新工作正常并且符合预期。

可能还值得一提的是，如果我尝试在 useEffect 片段中使用 setData，则 react-table 甚至不会被填充。

const {useTable} = require('react-table')

const MainTable = ({dataTableObj}) => {

const [reports, setReports] = useState(dataTableObj.reports)

const getInitialData = () => reports.map(report => ({
    name: report.title,
    runDate: report.runDate,
    createdDate: report.createdDate,
    category: report.category.title,
    actions: report.id,
}));

const [data, setData] = useState(getInitialData)

const {
    getTableProps,
    getTableBodyProps,
    rows,
    prepareRow,
} = useTable(
    {
        columns,
        data,
    }
);

useEffect(() => {

    setReports(dataTableObj.reports)
    // setData(dataTableObj.reports)

}, [dataTableObj.reports]);

const onConfirmDelete = (id) => {

    deleteReport(id).then(() => {

        const del = reports.filter(report => id !== report.id)
        setReports(del)

    })
}

return (
    <div>
        <table {...getTableProps()}>
            <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
                prepareRow(row)
                return (
                    <tr {...row.getRowProps()}>
                        <td>{row.original.name}</td>
                        <td>
                            <IconButton onClick={() => onConfirmDelete(row.original.actions)}>
                                <Delete/>
                            </IconButton>
                        </td>
                    </tr>
                )
            })}
            </tbody>
            {/*<tbody>*/}
            {/*{reports.map((item) => {*/}
            {/*    return [*/}
            {/*        <tr key={item.id}>*/}
            {/*            <td>{item.title}</td>*/}
            {/*            <td>*/}
            {/*                <IconButton onClick={() => onConfirmDelete(item.id)}>*/}
            {/*                    <Delete/>*/}
            {/*                </IconButton>*/}
            {/*            </td>*/}
            {/*        </tr>*/}
            {/*    ];*/}
            {/*})}*/}
            {/*</tbody>*/}
        </table>
    </div>
    )
}

export default MainTable

我想我现在运行不知道我可能遗漏了什么，可能需要一些帮助或指导。

非常感谢。

Answer 1

我做了这个codesandbox来测试：https://codesandbox.io/s/confident-drake-e47wm?file=/src/MainTable.js

如果您在 MainTable.js 中切换第 9 行和第 10 行，您将切换它工作和不工作。似乎当您将数据放入本地状态时（就像您所做的那样，因为您正在映射它），它不会 re-render。不太确定这是为什么，我从未使用过 react-table，也许它在某个地方的文档中。

所以我认为您需要：

在父级中进行映射并将数据传递到已映射的MainTable，或
将 MainTable 包装在另一个进行映射的组件中，然后再次将数据传递到 MainTable 已经映射的
也许可以用自定义钩子来完成，我没试过。

UseEffect with React-Table 除非刷新页面，否则不显示更改

UseEffect with React-Table not displaying changes unless the page is refreshed

reactjs

react-table

use-effect

react-table-v7