Bubble.List 数据量过多时出现错误：Maximum update depth exceeded

[zxyah]

重现步骤

在线示例链接：（必填） https://stackblitz.com/edit/react-fclhfdqc?file=demo.tsx

步骤：

1. 直接运行即可看到

当前行为

No response

预期行为

No response

上下文

No response

版本

1.0.5

您在哪些浏览器上遇到了这个问题？

Chrome

[petercat-assistant[bot]]

您提到在使用 Bubble.List 时遇到了 "Maximum update depth exceeded" 的错误。这通常是由于组件在渲染过程中进入了无限循环，导致 React 的更新深度超过限制。

为了帮助您解决这个问题，我建议您检查以下几点：

1. 检查组件的状态更新逻辑：确保在组件中没有不必要的状态更新或递归调用，这可能导致无限循环。

2. 使用 useEffect 或 componentDidMount：如果您在组件加载时需要进行数据处理，确保使用 useEffect（对于函数组件）或 componentDidMount（对于类组件）来避免重复渲染。

3. 优化渲染逻辑：如果数据量过大，考虑使用虚拟列表（如 react-window 或 react-virtualized）来优化渲染性能。

4. 检查依赖项：如果使用了 useEffect，请确保依赖项数组设置正确，以避免不必要的重新渲染。

如果您能提供更多的代码细节或上下文，我可以更具体地帮助您解决问题。

如果您需要进一步的帮助，请在评论中描述您的问题并 @petercat-assistant 开始与我对话。

[simontang]

{messageList.length > 0 && ( <Bubble.List ref={listRef} style={{ maxHeight: 300 }} roles={roles} items={messageList} /> )}

目前有个workaround就是第一次渲染时一定是有数据是才渲染。

[angusJC]

我也遇到同样的问题 渲染60条数据就 Maximum update depth exceeded

[zxyah]

我也遇到同样的问题 渲染60条数据就 Maximum update depth exceeded

用上面兄弟的办法可以暂时解决这个问题

[angusJC]

我也遇到同样的问题 渲染60条数据就 Maximum update depth exceeded

用上面兄弟的办法可以暂时解决这个问题

对 参考了下他方案 销毁了组件延时重新加载 暂时解决

[angusJC]

阅读源码发现优化下面页面onTypingComplete函数也可以处理此问题 /components/bubble/hooks/useDisplayData.ts 优化为：

// Continue to show if last one finished typing const onTypingComplete = useEvent(key => { if (key === displayListLastKey) { if (items.length === displayList.length) { setDisplayCount(displayList.length + 1) } else { for (let i = displayCount; i < items.length; i += 1) { setDisplayCount(i + 2); if (items[i]?.typing) { break; } } } } });

[ianinagirl]

当页面有超过60条记录时，当前对话流式输出时控制台也会不断提示这个 warning:react-dom.development.js:86 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.， 对话记录不太多的页面就不会出现

[myesn]

频繁更新 items 也会出现这个问题，使用 节流函数 解决了，以为是自己的问题，搞了一下午