반응 사용비동기 대기 결과에 따라 효과 정리 기능이 달라짐

반응 사용비동기 대기 결과에 따라 효과 정리 기능이 달라짐

나는 일부 자원을 비동기적으로 얻은 다음 자원 변경에 가입하는 반응 구성요소를 가지고 있다.

문제는 정리 기능이 이 자원의 폐쇄에 있지 않다는 점이다.

useEffect(() => {
  const onResourceChange = () => { 
    console.log('resource changed');
  };

  getSomeResource().then(resource => {
    resource.subscribe(onResourceChange);
  });

  return () => {
    resource.unsubscribe(onResourceChange); // Error! resource is undefined
  }
}, []);

다음에서 비동기 함수를 사용한 이후useEffect허용되지 않음, 내부 자원으로부터 등록을 취소하는 가장 좋은 방법은 무엇인가?useEffect의 정리 기능?

나는 여기서 두 가지 "부작용"이 일어나고 있는 것을 본다.

1. 리소스 가져오기(한 번 실행 필요, 종속성)[])
2. 콜백 구독/구독 해제(리소스 변경, 종속성, 종속성,[resource])

그래서 나는

1. 두 개의 "단계"로 구분(각 단계, 하나의 부작용 처리)
2. 그리고 그것을 관습의 갈고리로 추출한다.

    function useResource() {
        const [resource, setResource] = useState(undefined)

        const onResourceChange = () => console.log('resource changed');

        // Get the resource, initially.
        useEffect(() => {
          getSomeResource(setResource)
        }, [])

        // When the resource is retrieved (or changed),
        // the resource will subscribe and unsubscribe
        useEffect(() => {
          resource.subscribe(onResourceChange)
          return () => resource.unsubscribe(onResourceChange)
        }, [resource])
    }

    // Use it like this
    function App() {
        useResource()

        return <>your elements</>
    }

보다시피 첫째는useEffect2번째는 "foll"만 가져오는 반면, 2번째는 것.useEffect콜백 해제/해제 책임이 있다.

그리고 체크아웃:deps각각에 열거하다useEffect(전자가 비어 있다.[]후자가 의지하고 있는 동안에[resource])

이건 해결책이야, 아마 추악한...그러나 여전히 해결책:)

useEffect(() => {
    const onResourceChange = () => { 
        console.log('resource changed');
    };

    let data = {};

    getSomeResource().then(resource => {
        data.resource = resource;
        resource.subscribe(onResourceChange);
    });

    return () => {
        data.resource && data.resource.unsubscribe(onResourceChange); // Error! resource is undefined
    };
}, []);

참조URL: https://stackoverflow.com/questions/57115559/react-useeffect-cleanup-function-depends-on-async-await-result