사용자 지정 후크가 useEffect에서 제대로 작동하지 않음

사용자 지정 후크가 useEffect에서 제대로 작동하지 않음

나는 이 이슈의 제목을 확신할 수 없었지만, 여기서 더 잘 설명할 수 있다.나는 어떤 정보에 의존하는 맞춤형 후크를 가지고 있다.정보의 일부는 비동기 통화에 의존해야 한다.

나는 세 가지 상황이 일어난다.

1. 조건부로 사용자 정의 후크를 렌더링하려고 시도했지만 다른 렌더에 더 많은 후크를 렌더링하기 때문에 반응이 좋지 않음.
2. 사용자 지정 후크는 한 번만 장착되며 필요한 업데이트된 정보를 전달하지 않는다.
3. 나는 의존성을 사용자 정의 후크에 전달하려고 시도했고 그것은 무한순환을 유발한다.

여기 내가 하고 있는 일의 작은 예가 있다.

사용자 지정 후크:

export function useProducts(options){ 
  const [products, setProducts] = useContext(MyContext)

  useEffect(() => {
    // only gets called once with `options.asyncValue` === null
    // needs to be recalled once the new value is passed in
    const loadProducts = async () => {
      const data = await asyncProductReq(options)
      setProducts(data)
    }
    loadProducts()
  }, []) // if I pass options here it causes the infinite loop

  return [products, setProducts]
}

내부 기능 호출:

export function(props){
 const [asyncValue, setValue] = useState(null)

 useEffect(() => {
   const loadValue = async () => { 
     const data = await asyncFunc()
     setValue(data)
   }
   loadValue()
 }, []}

 const options = {...staticValues, asyncValue}
 const [products] = useProducts(options)
 return (
  <h2>Hello</h2>
 )
}

종속성이 되려면 옵션을 넘겨야 한다는 건 알지만, 일단 비동기 호출이 펑크 안에서 이루어지면 객체가 바뀌지 않는데 왜 무한 재로드가 발생하는지 알 수 없다.

네가 추가한 것은 정확했다.options사용자 지정 후크에 대한 종속성 목록에 있는 경우

무한 반복하는 이유는optionsIS는 끊임없이 변화한다.

문제는 구현 과정에서 한 단계 더 나아가서 활용해야 한다는 겁니다.useMemo전체 구성요소가 변경되는 대신 비동기 값이 변경될 때만 옵션이 변경되도록 후크.

이렇게 하십시오.

const options = React.useMemo(() => ({...staticValues, asyncValue}), [asyncValue])

참조URL: https://stackoverflow.com/questions/61755285/custom-hooks-not-working-properly-with-useeffect