每10秒用reactjs钩子从外部Api获取数据

Question

我使用React js钩子在UseEffect中每10秒从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])

Answer 1

您可以使用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])

like explain in react doc:

useRef返回一个可变ref对象，其.current属性为初始化为传递的参数(initialValue)。返回的对象将在组件的整个生命周期内持续存在。

所以无论你的组件再次渲染。