Question

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

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

也许值得一提的是，如果我尝试在useEffect块中使用setData，则反应表甚至都不会被填充。

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

我制作了以下代码框以进行测试：https://codesandbox.io/s/confident-drake-e47wm?file=/src/MainTable.js

如果您在MainTable.js中切换第9行和第10行，则将其切换为工作状态而没有工作。看来，当您将数据置于本地状态时（因为要映射它，您会这样做），所以它不会重新呈现。不确定为什么，我从未使用过react-table，也许它在文档中的某个地方。

所以我认为您要么需要：

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

除非刷新页面，否则带有React-Table的UseEffect不会显示更改

1 个答案: