已解决 - ReactJS - 父表上的行选择崩溃嵌套表

Posted 2023-02-22

【中文标题】已解决 - ReactJS - 父表上的行选择崩溃嵌套表

【英文标题】：SOLVED - ReactJS - Row select on parent table crashes nested tables

【发布时间】：2021-11-14 07:55:31

【问题描述】：

在上周进行了相当多的谷歌搜索之后，我决定向各位温柔的人请教，因为我似乎没有找到任何可能对我的具体案例有用的信息。

这个问题与嵌套函数组件中状态变化的处理有关，虽然我本人对 ReactJS 和一般编码没有经验，但我希望我可以为您提供有关该问题的足够信息。

这是一些伪代码。

页面结构

function Parent(props) 

     ...
     handleFilters()
     resetFilters()
     ...

     return(
          <div>
          <FirstTable filterTable=filters/>
          </div>

第一表

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

页面加载，第一个表格被渲染。 第一个表上的 RowSelect 触发渲染第二个表的条件组件。 在第一个表上选择新行成功更新了第二个表。

场景 2

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

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

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

在此先感谢，并请原谅我的小细节。

【问题讨论】：

有机会时请格式化您的代码。

感谢您的建议，我添加了一些缩进，电话搞砸了

【参考方案1】：

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