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

本文介绍了每隔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中的解释：

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

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