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

Question

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

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

（如果有帮助，应用程序会更大一些，而且我正在使用 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

您可以将两个内部状态变量合并到一个 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

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

Answer 2

您在 2 个 useEffects 中调用了相同的函数，您可以先检查您正在观看的 useEffects 是 '' 还是 null [tagId] 和 [query]，您可以试试这个下面的代码。希望对你有帮助

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

  useEffect(() => {
    if(tagId && tagId !== null) {
       doSomeAjaxAndUpdateResults()
       setQuery('')
    }
  }, [tagId])

  useEffect(() => {
    if(query && query !== '') {
      doSomeAjaxAndUpdateResults()
    }
  }, [query])
}