在react中使用useEffect时如何停止出现“超出最大更新深度”

Question

在渲染聊天消息并滚动到最后一条消息时，我收到有关 next.js 中超出最大更新深度的错误

“错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环”

什么可能导致此错误以及如何修复它？

const scrollRef = useRef<ElementRef<'div'>>(null)
const [fakeLoading, setFakeLoading] = useState(messages.length === 0 ? true : false)

useEffect(() => {
    const timeout = setTimeout(() => {
        setFakeLoading(false)
    }, 1000)

    return () => {
        clearTimeout(timeout)
    }
}, [])

useEffect(() => {
    scrollRef?.current?.scrollIntoView({ behavior: 'smooth' })
}, [messages.length])

return (
    <div className="flex-1 overflow-y-auto pr-4">
        <ChatMessage 
            role="system"
            isLoading={fakeLoading}
            content={`Hello, I'm ${companion.name}, ${companion.description}`}
            src={companion.src}
        />
        {messages.map((message, key) => (
            <ChatMessage 
                key={key}
                content={message.content}
                role={message.role}
                src={companion.src}
            />
        ))}
        {isLoading && (
            <ChatMessage
                role="system"
                isLoading
                src={companion.src}
            />
        )}
        <div ref={scrollRef} />
    </div>
)

Answer 1

确保仅在消息更改时调用scrollIntoView。

更新第二个

useEffect

Hook，如下：

useEffect(() => {
  if (scrollRef.current) {
    scrollRef.current.scrollIntoView({ behavior: 'smooth' });
  }
}, [messages.length]);