【Bug】proTable 添加persistenceKey报错

[Qzuserlfy]

Reproduction link

Steps to reproduce

代码中添加 const [columnsStateMap, setColumnsStateMap] = useState({}); 表格中加入下列参数 columnsState={{ value: columnsStateMap, persistenceKey: "table", persistenceType: "localStorage", onChange: setColumnsStateMap }} 报错：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

将 persistenceKey: "table"注释了之后，运行正常

What is expected?

能正常运行

What is actually happening?

报错：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Environment	Info
antd	4.22.8
React	react
System	win7
Browser	Google Chrome102.0.5005.115

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#5348][ProTable][85%]
• [#5742][🐛[BUG] ProTable 使用columnsState之后，只要persistenceType给了值，页面就无限渲染了][63%]

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

针对该问题，可能是由于在组件更新时会不断触发 setColumnsStateMap 导致出现了栈溢出的错误。尝试在更新时使用 useEffect 来间接控制执行更新的次数，改善该错误。

const [columnsStateMap, setColumnsStateMap] = useState({});

useEffect(() => {
  if (Object.keys(columnsStateMap).length && !localStorage.getItem('table')) {
    localStorage.setItem('table', JSON.stringify(columnsStateMap));
  }
}, [columnsStateMap]);

return (
  <ProTable
    columns={columns}
    request={() => fetchDemo()}
    columnsState={{
      value: columnsStateMap,
      persistenceKey: 'table',
      persistenceType: 'localStorage',
      onChange: setColumnsStateMap,
    }}
  />
);

同时，尝试判断本地存储中是否存在表格的状态，若不存在，则用当前状态初始化本地存储，这样可以让表格显示正确的列，也避免了无限更新的问题。

另外，可以尝试升级 antd 到最新版本（4.16.13 及以上），有可能已经修复了该问题。如果问题仍然存在，请检查本地开发环境，可能是由于被其他库影响导致了该问题。