🐛[BUG] ProTable 使用columnsState之后，只要persistenceType给了值，页面就无限渲染了

[zcSkr]

🐛 bug 描述

devScripts.js:6523 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

📷 复现步骤

使用columnsState ，persistenceType设置了localStorage 或者 sessionStorage。 只要不写persistenceType 就正常

🏞 期望结果

columnsState可以持久化缓存状态列的显示隐藏

💻 复现代码

columnsState={{ persistenceKey: 'pro-table-singe-demos', persistenceType: 'sessionStorage', onChange(value) { console.log('value: ', value); }, }}

© 版本信息

• ProComponents 版本: [e.g. 4.0.0] 1.1.16
• umi 版本 3.5.26
• 浏览器环境 Chrome 103.0.5060.114
• 开发环境 [e.g. mac OS] macOS 12.15.1

🚑 其他信息

[github-actions[bot]]

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

• [#5348][ProTable][85%]

[luotongzhou]

这周会解吗？更新了版本，但不知道回退到哪个版本才能没有这个问题

[982528494]

这周会解吗？更新了版本，但不知道回退到哪个版本才能没有这个问题

🐛 bug 描述

devScripts.js:6523 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

📷 复现步骤

使用columnsState ，persistenceType设置了localStorage 或者 sessionStorage。 只要不写persistenceType 就正常

🏞 期望结果

columnsState可以持久化缓存状态列的显示隐藏

💻 复现代码

columnsState={{ persistenceKey: 'pro-table-singe-demos', persistenceType: 'sessionStorage', onChange(value) { console.log('value: ', value); }, }}

© 版本信息

• ProComponents 版本: [e.g. 4.0.0] 1.1.16
• umi 版本 3.5.26
• 浏览器环境 Chrome 103.0.5060.114
• 开发环境 [e.g. mac OS] macOS 12.15.1

🚑 其他信息

不知道什么原因，新建的项目就没这个问题，旧的项目 同样版本的库就出现了以上问题

最后不写persistenceType，onchange里面存session解决

columnsState={{ //列设置-操作 value: columnsStateMap, //列状态的值，支持受控模式 onChange: handleOnChangeColumn, //列状态的值发生改变之后触发 }}

const columnsStore = JSON.parse(localStorage.getItem("columnsManagement")) || {}; const [columnsStateMap, setColumnsStateMap] = useState(columnsStore); const handleOnChangeColumn = (val) => { localStorage.setItem("columnsManagement", JSON.stringify(val)); setColumnsStateMap(val); };

[luotongzhou]

看了下源码是三周前的一个 table -> container.js 一个 useEffect 的代码造成的，一直在执行

[982528494]

vite 版本小于2.8.0会出现以上问题，提升vite版本不出现以上问题

[zcSkr]

vite 版本小于2.8.0会出现以上问题，提升vite版本不出现以上问题

没有用vite，umi还是3.5.32的，还不支持vite

[zpaimon]

同样问题，知道回退那个版本会避免这个问题吗？

[chenshuai2144]

我没法重现这个问题，有demo 吗

[github-actions[bot]]

Hello @zcSkr. Please provide a online reproduction by forking this link https://codesandbox.io/ or a minimal GitHub repository.

你好 @zcSkr, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。 如何写个好问题？https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

[yujs]

同样问题，知道回退那个版本会避免这个问题吗？

试一下"@ant-design/pro-table": "2.75.1"，我本地刚好这个版本不报错

[luotongzhou]

  /**  配置或列更改时对columnsMap重新赋值 */
  useLayoutEffect(() => {
    const { persistenceType, persistenceKey } = props.columnsState || {};

    if (persistenceKey && persistenceType && typeof window !== 'undefined') {
      /** 从持久化中读取数据 */
      const storage = window[persistenceType];
      try {
        const storageValue = storage?.getItem(persistenceKey);
        if (storageValue) {
          setColumnsMap(JSON.parse(storageValue));
        } else {
          setColumnsMap(defaultColumnKeyMap);
        }
      } catch (error) {
        console.warn(error);
      }
    }
  }, [props.columnsState, defaultColumnKeyMap, setColumnsMap]);

是这段代码的问题，但我不知道怎么提 pr

[zcSkr]

好了，兄弟们。 今天想起来又试了一下，已经没之前的问题了。

ProComponents 版本: 1.1.25 umi 版本 "@umijs/max": "^4.0.30", 浏览器环境 Chrome 103.0.5060.114 开发环境 macOS 13.0.1

[Li-mengbo]

好了，兄弟们。 今天想起来又试了一下，已经没之前的问题了。

ProComponents 版本: 1.1.25 umi 版本 "@umijs/max": "^4.0.30", 浏览器环境 Chrome 103.0.5060.114 开发环境 macOS 13.0.1

兄弟想问下ProComponents 版本: 1.1.25里的pro-table版本是多少？同样遇到了这个问题，升级了pro-table依然没解决

[luotongzhou]

尽量升级pro-components 到最新版本，之前的无限渲染是因为本地node_modules 里面的pro-utils的 useMergedState 代码比较老导致的，更新之后就不会了

[Li-mengbo]

尽量升级pro-components 到最新版本，之前的无限渲染是因为本地node_modules 里面的pro-utils的 useMergedState 代码比较老导致的，更新之后就不会了

只用到了pro-table现在已经是最新版本3.2.2还是有这个问题

[luotongzhou]

所以你保证pro-utils的useMergedState的代码跟线上仓库保持一致

[Li-mengbo]

老哥 我看了下最新的pro-table版本3.2.2的依赖pro-utils是最新的包了，结果还是有这个问题

[luotongzhou]

建议删除依赖重新拉取

[Li-mengbo]

谢谢老哥～我重新用umijs/max新建了个项目pro-components也是最新的，依然有这个问题，准备换其他方案解决了，感谢老哥耐心解答

[xiaoshengwpp]

24 年了 刚遇到 问题还在

[982528494]

https://github.com/982528494/customColumnTable 自己写的自定义列表组件，没弄npm包，可以copy代码参考修改试试