在 Next js 中使用 useState 挂钩后，浏览器选项卡冻结

Question

这是一个非常简单的客户端组件：

'use client';
import {useEffect, useState} from "react";

export default function MultiplePosts({posts, session, slug}) {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('Count has been updated:', count);
    }, []);


    function incrementCount() {
        setCount(count + 1);
    }

    return (
        <div className={"post-infinite-container"}>
            <p>Count: {count}</p>
            <button onClick={() => incrementCount()}>Increment</button>
        </div>
    )
}

从一开始我想将它用作无限滚动，但面临问题。当我以某种方式与 useState 交互时 - 它冻结了选项卡，我什至无法关闭它。即使在这个非常简单的例子中我也面临着它。

我已经阅读了大量有关我的问题的其他问题，但找不到解决方案。这已经让我抓狂了。

我已经做了什么：

1. 检查是否有任何组件导致多次重新渲染 - 否。两个是我拥有的最大重新渲染次数。
2. 关闭问题一周围的所有组件。没有帮助。

拜托，也许有人在我之前遇到过这个问题。我只是不明白为什么会发生这种情况。导致这个问题的原因太简单了。

Answer 1

解决方案：一个客户端组件被标记为异步。它会导致无限的重新渲染。不要在客户端组件中使用异步函数。绝不