Question

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

2021-01-22

1356

javascript reactjs react-hooks

我在 UseEffect 中使用 React js hooks 每 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 hook 来了解它是否是第一次渲染。像这样：

 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 returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

所以无论您的组件是否再次渲染都没关系。