gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 17:33:14 26 4
gpt4 key购买 nike

下面的示例显示了我对 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.
}

最佳答案

您可以将两个内部状态变量合并到一个 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 变化将分别触发一次调用。

关于reactjs - 如何防止React Hook的useEffect多次取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57796746/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com