Question

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

我发生了三种情况。

尝试有条件地渲染自定义钩子，但由于在不同的渲染器上渲染了更多的钩子，因此React不喜欢这样做。
自定义挂钩仅安装一次，而不会传递所需的更新信息。
我尝试将依赖项传递给自定义钩子，这会导致无限循环。

这是我在做什么的一个小例子。

自定义挂钩：

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

我知道我需要传递选项以使其成为依赖项，但是我无法弄清楚为什么一旦在函子内部进行异步调用后对象没有发生变化，它就会导致无限重载。

Answer 1

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

之所以无限循环是因为options不断变化。

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

这样做：

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

自定义挂钩无法与useEffect

1 个答案: