每隔10秒使用reactjs钩子从外部api获取数据
在UseEffect中,我每隔10秒使用REACTIVE js钩子从API获取数据。问题是首先进行状态更新需要10秒。 因此,在setInterval函数之前,一旦组件未呈现,我就需要获取数据。
代码部分在此处:
function getList() {
return axios.post('http://localhost:5000/getParameters', { no: no, name: name })
.then(data => data.data)
}
function getParams() {
return axios.post('http://localhost:5000/getParametersSite', { no: no, name: name })
.then(data => data.data)
}
useEffect(() => {
let mounted = true;
let isMounted = true
const intervalId = setInterval(() => {
getParams()
.then(itemsa => {
if(mounted) {
setParams(itemsa)
}
})
getList()
.then(items => {
if(mounted) {
setMenuData(items)
}
})
}, 10000)
return () => {
clearInterval(intervalId);
isMounted = false
mounted = false;
}
}, [menuData,params])
解决方案
您可以使用useRef
钩子来知道它是否是第一次呈现。如下所示:
const firstUpdate = useRef(true);
useEffect(() => {
let mounted = true;
let isMounted = true
if (firstUpdate.current) {
firstUpdate.current = false;
getParams()
.then(itemsa => {
if(mounted) {
setParams(itemsa)
}
})
getList()
.then(items => {
if(mounted) {
setMenuData(items)
}
})
}
const intervalId = setInterval(() => {
getParams()
.then(itemsa => {
if(mounted) {
console.log("getParams",itemsa);
setParams(itemsa)
}
})
getList()
.then(items => {
if(mounted) {
console.log("setParams",items);
setMenuData(items)
}
})
}, 10000)
return () => {
clearInterval(intervalId);
mounted = false;
}
}, [menuData,params])
喜欢react doc中的解释:
useRef返回可变引用对象,其.current属性为 初始化为传递的参数(InitialValue)。返回的对象 将在组件的整个生命周期内持续存在。
所以不管您的组件是否再次呈现。
相关文章