Question

以下示例显示了我对useEffect()的使用如何导致多个Ajax请求。在组件的初次渲染时，此请求将发出两次。如果更改了标签，则会两次发出此请求。

我可以使用某种内部状态变量来跟踪是否已获取。或者，我可以创建一种堆栈，在其中推送某种类型的潜在请求，然后在返回之前弹出堆栈并运行最终请求。但是所有这些似乎都是hack。

（如果有帮助，该应用程序会更大一些，而我正在使用redux。是更广泛的解决方案，例如redux-saga的取消吗？）

const Thing => () => {
  const [tagId, setTagId] = useState(null)
  const [query, setQuery] = useState('')

  useEffect(() => {
    doSomeAjaxAndUpdateResults()
    setQuery('')
  }, [tagId])

  useEffect(() => {
    doSomeAjaxAndUpdateResults()
  }, [query])

  // ... bunch of extra effects with similar dependencies.
}

Answer 1

您要在2个useEffects中调用相同的函数，您可以做的是先检查您正在观看的useEffects是''还是null [tagId]和{{ 1}}，您可以在下面尝试此代码。希望对您有帮助

[query]

Answer 2

您可以将两个内部状态变量组合成一个useEffect钩子，然后进行一次更改doSomeAjaxAndUpdateResults

const Thing = (prop) => {
  const [tagId, setTagId] = useState(null)
  const [query, setQuery] = useState('')

  useEffect(() => {
    doSomeAjaxAndUpdateResults()
    setQuery('')
  }, [tagId, query])

  return ...;
}

以下是实时示例，该示例还依赖于props的传递：https://stackblitz.com/edit/react-wzmxmj

第一个渲染具有初始值，第二个渲染具有传递的道具，然后后续的道具更改将分别触发一个调用。

如何防止React Hook的useEffect多次获取数据

2 个答案: