Fetch 和 setInterval 反应钩子问题答案

【问题标题】：Fetch and setInterval react hooks problemFetch 和 setInterval 反应钩子问题
【发布时间】：2021-01-16 12:49:03
【问题描述】：

我最近使用带有 React 的钩子从服务器获取数据，但我遇到了钩子问题。代码看起来是正确的，但看起来 useEffect 不是第一次调用而是在 setInterval 3 秒后调用。在它出现之前，我有 3 秒钟的空白表。我想直接显示数据，3秒后调用。

正确的使用方法是什么？

const [datas, setDatas] = useState([] as any);

  useEffect(() => {
    const id = setInterval(() => {
        const fetchData = async () => {
          try {
            const res = await fetch(URL);
            const json = await res.json();
            setDatas(jsonData(json));
          } catch (error) {
            console.log(error);
          }
        };
        fetchData();
    }, TIME)

    return () => clearInterval(id);
  }, [])

【问题讨论】：

标签： reactjs react-hooks fetch setinterval

【解决方案1】：

使用 React Hooks：

  const [seconds, setSeconds] = useState(0)

  const interval = useRef(null)

  useEffect(() => { if (seconds === 60) stopCounter() }, [seconds])

  const startCounter = () => interval.current = setInterval(() => {
    setSeconds(prevState => prevState + 1)
  }, 1000)

  const stopCounter = () => clearInterval(interval.current)

【讨论】：

【解决方案2】：

您需要在初始时间在间隔之外调用一次fetchData。在区间外定义fetchData。

useEffect(() => {
  // (1) define within effect callback scope
  const fetchData = async () => {
    try {
      const res = await fetch(URL);
      const json = await res.json();
      setDatas(jsonData(json));
    } catch (error) {
      console.log(error);
    }
  };
    
  const id = setInterval(() => {
    fetchData(); // <-- (3) invoke in interval callback
  }, TIME);

  fetchData(); // <-- (2) invoke on mount

  return () => clearInterval(id);
}, [])

【讨论】：