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

IT技术 javascript reactjs react-hooks
2021-05-19 13:56:17

我使用 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])
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])

就像在react doc 中解释：

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

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

其它你可能感兴趣的问题
上一篇Digital Ocean 正在询问我的 Unix 密码，但是一旦我提供它，它就会关闭 下一篇用户在移动浏览器和页面之间切换屏幕后，在 React Native 中重新渲染生命周期