反应 - 使用 setInterval 的 useEffect

Question

我有一个带有setInterval 在useEffect 内的功能组件。 但loadData 中的值始终等于初始一 (0)，尽管渲染正确。

如何在setInterval 调用的loadData 中获取当前的value？

    ...
    const [value, setValue] = useState(0);
    const [service, setService] = useState();

    useEffect(() => {
        setService(new ApiService());
    }, [])

    useEffect(
        () => {
            const timerId = setInterval(loadData, 1000 * 5);
            return () => clearInterval(timerId);
        }, 
        [service]
    )

    async function loadData() {
        const result = await service.getData();
        console.log("old value: ", value); // "value" is always 0 (initial)
        setValue(result.data.value);
    } 

    ...

Answer 1

在 useState 中使用功能更新：

setValue((prevState) => {
  console.log("old value: ", prevState);
  return result.data.value;
});

Answer 2

您可以更改 useEffect() 挂钩的依赖项数组，此时由于 loadData 关闭 value，您最终会处于陈旧状态：

const loadData = useCallback(async function() {
  const result = await service.getData();
  console.log("old value: ", value); // "value" is always 0 (initial)
  setValue(result.data.value);
}, [service, value]);


useEffect(() => {
  const timerId = setInterval(loadData, 1000 * 5);
  return () => clearInterval(timerId);
}, [loadData]);

上面将你的函数包装在钩子useCallback() 中，如果依赖数组：service 或data 包含与先前渲染相同的值，则返回相同的函数引用。如果依赖数组中的值发生变化，那么分配给loadData 的函数将是一个新的函数引用。当service 或value 发生变化时，使用loadData 作为useEffect() 挂钩的依赖项允许您重新定义间隔以引用新创建的loadData 回调。下面的可运行示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>

<script type="text/babel">
  const {useState, useEffect, useCallback} = React;

  const getRandomAsync = () => new Promise((resolve) => { // simulate api call
    setTimeout(resolve, 10, Math.floor(Math.random() * 100));
  });

  const App = () => {
    const [value, setValue] = useState(0);

    const loadData = useCallback(async () => {
      const num = await getRandomAsync();
      console.log("Got random number:", num);
      console.log("Value currently is:", value);
      setValue(num);
    }, [value]);

    useEffect(() => {
      const timerId = setInterval(loadData, 1000);
      return () => clearInterval(timerId);
    }, [loadData]);

    return <p>{value}</p>;
  }
  
  ReactDOM.render(<App />, document.body);
</script>