ReactJS -在父表上选择行会导致嵌套表崩溃

Question

上个星期在谷歌上搜索了相当多之后，我决定问你们这些温柔的人，因为我似乎没有找到任何可能对我的具体情况有用的东西。

这个问题与嵌套函数组件内状态变化的处理有关，尽管我自己对ReactJS和编码的经验并不丰富，但我希望我能给你足够的信息。

下面是一些伪代码。

<标题>页面结构

function Parent(props) {
...
handleFilters()
resetFilters()
...
return(
<div>
<FirstTable filterTable={filters}/>
</div>
}

FirstTable

function FirstTable(props) {

...
handleFilters()
resetFilters()
...  
useEffect {
APIcall(params).then((data) => {
if (data !== undefined) {
setTableData({
...tableData,
});
}     
});
}, [props.filters, tableData.page, column]);
}
const onRowSelection = (e) => {
APIcall_2(params).then((results)=>{ 
setValues({...})
}} 
let toggledcomponent = (toggle) => {
if (!toggle) {
return (
<div><p>message about no rows being selected</p></div>
);
} else {
return (
<div>             
<SecondTable filters={filters}/>
</div>
);
} 
};
return(
<div>
<div>
<DataGrid(firstTable)
onRowSelected = {(e) => {onRowSelection(e)}
<Datagrid/>
</div>
{toggledcomponent(filters)}
</div>
) }

<标题>

SecondTable具有与FirstTable非常相似的结构，并以与第一个完全相同的方式调用条件呈现被切换的组件，第二个和第三个表设置为useEffect，当相对父元素的props发生变化时更改。ThirdTable的返回值只包含Datagrid部分。

场景1

1. 页面加载，第一张表被渲染。
2. 第一个表的RowSelect触发渲染第二个表的条件组件。
3. 选择第一个表的新行成功更新第二个表。

场景2

1. 页面加载，第一张表被渲染。
2. 第一个表的RowSelect触发渲染第二个表的条件组件。
3. 第二个表的RowSelect触发渲染第三个表的条件组件。
4. 在第一个表上选择新行会导致页面崩溃，首先会减慢速度，然后在超过多个渲染深度时停止工作。

我明白这个问题可能看起来不清楚，但假设第一张和第二张表完全相同，为什么只有在第三张表打开时才会出现这个问题?

我的目标是，当我在第一个表上进一步触发行选择时，只有第二个表被加载，第三个表应该被禁用，直到第二个表的行选择触发显示"select a row"消息。

提前感谢，并原谅我的小清晰度。

Answer 1

通过将需要卸载的表的toggle状态(触发条件呈现)设置为0或null并再次设置状态以使用更新的数据呈现它们来解决这个问题。这可能是一个糟糕的解决方案，由于父组件的许多不必要的渲染，但它避免了页面完全崩溃。