Ich habe einen Zähler und useEffect
中的 console.log()
来记录我的状态中的每个更改,但是 useEffect
wird beim Montieren zweimal aufgerufen. Ich verwende React 18. Hier ist die CodeSandbox für mein Projekt und der Code unten:
import { useState, useEffect } from "react"; const Counter = () => { const [count, setCount] = useState(5); useEffect(() => { console.log("rendered", count); }, [count]); return ( <div> <h1> Counter </h1> <div> {count} </div> <button onClick={() => setCount(count + 1)}> click to increase </button> </div> ); }; export default Counter;
更新:回顾一下这篇文章,稍微明智一点,请不要这样做。
使用
ref
或创建一个没有的自定义hook
。自 React 18 起,当您使用
StrictMode
进行开发
时,useEffect
在挂载时被调用两次是正常的。以下是他们在 文档:这看起来很奇怪,但最终,我们通过缓存 HTTP 请求并在有两个调用时使用清理函数来编写更好的 React 代码,无错误,符合当前指南,并与未来版本兼容一个问题。这是一个例子:
在这篇非常详细的文章中,React 团队解释了
useEffect
前所未有并举例说明:对于您的特定用例,您可以保持原样,无需担心。并且您不应该尝试将这些技术与
useEffect
中的useRef
和if
语句一起使用以使其触发一次,或删除StrictMode
,因为正如您可以在 文档:如果您仍然遇到问题,也许您正在使用
useEffect
,正如他们在 不是效果:初始化应用程序 和 不是效果:购买产品,我建议您阅读文章作为一个整体。