이 오류 메시지에서 '이 변수를 useEffect 안쪽으로 직접 이동'한다는 것은 무엇을 의미합니까?

이 오류 메시지에서 '이 변수를 useEffect 안쪽으로 직접 이동'한다는 것은 무엇을 의미합니까?

소품을 통해 아이 컴포넌트에 물체를 전달하려고 합니다.이 값은 useEffect 후크에서 설정되며 자녀 컴포넌트에 전달되면 손실됩니다.

다른 함수로 useEffect 훅 외부에 오브젝트 값을 설정하려고 했지만 아직 값이 손실되었습니다.

import React, { useState, useEffect } from 'react';

function SetValue(props){

    let users = {};

    useEffect(() => {
          users = { user: 'bob' };
    })        

    return <NewComponent users={users} />
}

export default SetValue;

props.users는 빈 개체 {}이(가) 아니라 {user: 'bob' }이어야 합니다.

오류 메시지는 다음과 같습니다.

"React Hook useEffect 내부의 'users' 변수에 대한 할당은 각 렌더링 후에 손실됩니다.시간이 지남에 따라 값을 유지하려면 useRef Hook에 저장하고 '.current' 속성에 변경 가능한 값을 유지합니다.그렇지 않으면 이 변수를 useEffect react-hooks/exhaustive-deps 내부로 직접 이동할 수 있습니다."

대해서useEffect후크:

이 후크를 사용하면 렌더링 후 컴포넌트가 작업을 수행해야 함을 React에 알립니다.React는 사용자가 전달한 함수를 기억하고('효과'라고 부릅니다), DOM 업데이트를 수행한 후 나중에 호출합니다.

즉, 내부 기능이useEffect컴포넌트 렌더링 후 호출됩니다.그래서 빈 객체가 있는 거야

에러에 대해서.리액트가 기억을 못 해서 네가 가져왔어users변수 - 각 렌더링에 다시 작성됩니다.SetValue요소.사용하는 것이 더 나을 것이다.useState값을 설정하기 위한 후크useEffect다음 렌더링 때 기억해 두세요.

그리고 한 장 더.에 두 번째 인수를 넘기는 것을 잊지 마세요.useEffect여러 가지 종속성을 가지고 있습니다.이제 각 렌더링 후에 후크가 호출됩니다.SetValue요소.

사용방법은 다음과 같습니다.useState후크:

import React, { useState, useEffect } from 'react';

function SetValue(props){

    const [users, setUsers] = useState({});

    useEffect(() => {
          setUsers({ user: 'bob' });
    }, [
       //here you could pass dependencies, or leave it empty to call this effect only on first render
    ]);        

    return <NewComponent users={users} />
}

export default SetValue;

이 경고 - "React Hook useEffect 내부에서 'users' 변수에 대한 할당은 각 렌더링 후에 손실됩니다." 이것이 상태 개념이 React에 존재하는 이유입니다.리액트 컴포넌트는 연속적인 재렌더(컴포넌트 라이프 사이클)에 걸쳐 정상적인 Javascript 변수의 값을 유지하지 않습니다.리액트 상태는 컴포넌트가 재렌더 되었을 때 스테이트의 변경이 DOM에 반영될 수 있도록 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/56155959/what-does-it-mean-to-move-this-variable-directly-inside-useeffect-in-this-erro