reactjs - 如何防止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 Hook 中，然后如果有一个更改，您可以执行 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

第一次渲染带有初始值，第二次渲染带有传递的 props，然后后续的 props 变化将分别触发一次调用。