카운터가 있고 useEffect 中的 console.log() 来记录我的状态中的每个更改，但是 useEffect마운트 시 2번 호출됩니다. 저는 React 18을 사용하고 있습니다. 내 프로젝트의 CodeSandbox와 아래 코드는 다음과 같습니다.
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; 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
업데이트: 이 게시물을 다시 보시고 좀 더 현명하게 행동하시기 바랍니다.
사용
으아아아ref或创建一个没有的自定义hook.React 18부터
StrictMode进行开发时，useEffect를 사용하면 마운트할 때 두 번 호출되는 것이 일반적입니다. Documentation에 있는 내용은 다음과 같습니다.이상해 보일 수도 있지만 결국 두 호출 사이에 문제가 있을 때 HTTP 요청을 캐싱하고 정리 기능을 사용하여 버그가 없고 현재 지침을 준수하며 향후 버전과 호환되는 더 나은 React 코드를 작성합니다. . 예는 다음과 같습니다.
으아악이 매우 상세한 기사에서 React 팀은 이전과는 전혀 다른
useEffect를 설명하고 예를 들어 설명합니다.특정 사용 사례의 경우 걱정하지 말고 그대로 둘 수 있습니다. 그리고
StrictMode 를 제거하려고 시도해서는 안 됩니다.useEffect中的useRef和if语句一起使用以使其触发一次，或删除StrictModeuseEffect의 useRef 및 if 문과 함께 이러한 기술을 사용하여 한 번 실행되도록 하거나Documents
효과 없음: 제품 구매 🎜 , 🎜기사 🎜전체를 읽어 보시기 바랍니다. 🎜useEffect，正如他们在 계속 문제가 발생한다면 useEffect를 사용 중일 수 있으며 useEffect를 사용하면 안 됩니다. 우선 > /learn/synchronizing-with- Effects#not-an- effect-initializing-the-application" rel="noreferrer">효과 없음: 애플리케이션 초기화 및