상태 설정자에 대한 React-hooks/exhaustive-deps 경고의 요점은 무엇입니까?
P粉465287592
2023-09-01 22:11:31
<p>React를 사용하여 페이지 매김을 만들고 있습니다. </p>
<p>애플리케이션은 상태를 사용하여 페이징 및 검색을 관리합니다. 검색어가 변경되면 페이지 매김을 1페이지로 재설정하고 싶습니다. </p>
<pre class="brush:php;toolbar:false;">// 단순화된 예
함수 useSearchTerm() {
return React.useState("");
}
함수 usePage() {
return React.useState(1);
}
함수 MyComponent(){
const [searchTerm, setSearchTerm] = useSearchTerm()
const [페이지, setPage] = usePage();
useEffect(() => {
setPage(1);
}, [searchTerm]); // <-- ESLint 경고는 다음과 같습니다.
}</pre>
<p>이렇게 하면 ESLint 경고 <code>React Hook useEffect 누락 종속성: 'setPage'가 표시됩니다. 이를 포함하거나 useEffect 후크 array.eslintreact-hooks/exhaustive-deps에 대한 종속성을 제거하십시오. </p>
<p>하지만 물론 종속성에 setPage를 포함하면 렌더링할 때마다 효과가 호출됩니다. </p>
<p>이 사용 사례에 제가 뭔가 잘못하고 있는 걸까요? </p>
이 중간 기능이 문제인 것 같습니다:
으아악useState
返回的状态设置函数本身不会在每次渲染时重新创建,但通过此外部函数调用它似乎会破坏这一点。这导致依赖项发生变化,如useEffect
종속성 배열에 의해 관찰됩니다.이것이 필요하지 않은 경우
으아악usePage
函数(在示例中您不需要,但在更大的上下文中可能存在有意义的情况),那么只需将其完全删除并使用直接useState
:일반적으로 함수 내에서 후크를 호출하고 싶지 않은 이유는 후크가 모든 렌더링에서 일관되고 동일한 순서로 호출되어야 한다는 규칙을 쉽고 빠르게 위반할 수 있기 때문입니다. 따라서 구성 요소 자체의 본문(및 구성 요소 논리 초기)에서 후크 호출을 유지하는 것이 가장 좋습니다.
가끔 정말로 매우 유사하게 작동하는 사용자 정의 기능을
으아악useEffect
中的依赖项。由于声明的函数在每次渲染时都会重新声明,因此您会遇到上面遇到的问题。为了解决这个问题,您可以将该函数包装在useCallback
挂钩中,该挂钩本身也有一个依赖项数组,与useEffect
원하는 상황이 있습니다. 이 후크의 목적은 React가 렌더링 전반에 걸쳐 단일 함수 인스턴스로 캐시할 수 있는 사용자 정의 함수를 생성하는 것입니다(종속성이 변경되지 않는 한). 예: