상태 설정자에 대한 React-hooks/exhaustive-deps 경고의 요점은 무엇입니까?
P粉465287592
P粉465287592 2023-09-01 22:11:31
0
1
609
<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>
P粉465287592
P粉465287592

모든 응답(1)
P粉156983446

이 중간 기능이 문제인 것 같습니다:

으아악

useState 返回的状态设置函数本身不会在每次渲染时重新创建,但通过此外部函数调用它似乎会破坏这一点。这导致依赖项发生变化,如 useEffect 종속성 배열에 의해 관찰됩니다.

이것이 필요하지 않은 경우 usePage 函数(在示例中您不需要,但在更大的上下文中可能存在有意义的情况),那么只需将其完全删除并使用直接useState:

으아악

일반적으로 함수 내에서 후크를 호출하고 싶지 않은 이유는 후크가 모든 렌더링에서 일관되고 동일한 순서로 호출되어야 한다는 규칙을 쉽고 빠르게 위반할 수 있기 때문입니다. 따라서 구성 요소 자체의 본문(및 구성 요소 논리 초기)에서 후크 호출을 유지하는 것이 가장 좋습니다.

가끔 정말로 매우 유사하게 작동하는 사용자 정의 기능을 useEffect 中的依赖项。由于声明的函数在每次渲染时都会重新声明,因此您会遇到上面遇到的问题。为了解决这个问题,您可以将该函数包装在 useCallback 挂钩中,该挂钩本身也有一个依赖项数组,与 useEffect원하는 상황이 있습니다. 이 후크의 목적은 React가 렌더링 전반에 걸쳐 단일 함수 인스턴스로 캐시할 수 있는 사용자 정의 함수를 생성하는 것입니다(종속성이 변경되지 않는 한). 예:

으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿