在这里,将tableData
添加到useEffect
的依赖数组会导致无限循环。因为在useEffect
内部更新了tableData
状态,每次状态改变又会触发useEffect
再次执行,形成无限循环。
解决这个问题的一种方法是,在状态更新时创建一个新的数组,而不是直接修改现有数组。这样就不会触发依赖数组中tableData
的变更检测。
useEffect(() => {
// 更新表格数据,将columnToUpdate列的值设置为externalProp
const updatedTableData = tableData.map(row => ({
...row,
columnToUpdate: externalProp,
}));
// 使用 [...tableData] 创建一个新的数组,避免直接修改tableData导致无限循环
setTableData([...updatedTableData]);
}, [externalProp]); // 不需要将tableData作为依赖项,因为我们并没有直接修改它
// 注意:这种情况下,externalProp变化时,tableData不会立刻更新,而是等到下一次渲染周期才更新
然而,在这个特定场景下,由于我们在每次externalProp
变化时都希望更新tableData
中所有行的columnToUpdate
列,实际上没有必要将tableData
作为依赖项。当externalProp
变化时,执行更新逻辑是安全且合理的。