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]

您提到在使用 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;
}
}
}
}
});