自定义挂钩无法与 useEffect 一起正常工作

Question

我不确定这个问题的标题，但我可以在这里更好地解释一下。我有一个依赖于一些信息的自定义钩子。部分信息必须依赖于异步调用。

我遇到了三种情况。

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>
 )
}

我知道我需要将选项传递为依赖项，但如果在 func 内部进行异步调用后对象没有发生变化，我无法弄清楚为什么它会导致无限重新加载。

Answer 1

您在自定义挂钩的依赖项列表中添加 options 是正确的。

它无限循环的原因是因为options不断变化。

问题是您需要在实现中更进一步，并使用useMemo 挂钩，因此选项仅在异步值更改时更改，而不是整个组件更改。

这样做：

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