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

问题描述

我是一名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

我想在这一点上我对我可能会缺少的东西已经没有足够的想法了，可能需要一些帮助或指导。

非常感谢您。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）