每隔10秒使用reactjs钩子从外部api获取数据

Fetch data from external Api with reactjs hooks in every 10 seconds(每隔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)。返回的对象 将在组件的整个生命周期内持续存在。

所以不管您的组件是否再次呈现。

这篇关于每隔10秒使用reactjs钩子从外部api获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！