javascript - 为什么 useState 钩子(Hook)在 useEffect() 中使用循环时不更新

Question

情况1:

    const [present, setPresent] = useState([]);
     
    useEffect(() => {
    
        for (var j = 1; j <= totalPeriod; j++) {
          setPresent([
            ...present,
            {
              period: j,
              present: true,
            },
          ]);
        }
    
    }, []);

案例二:

    const [present, setPresent] = useState([]);
    
    let createPresent = [];
    for (var j = 1; j <= totalPeriod; j++) {
      createPresent = [
        ...createPresent,
        {
          period: j,
          present: true,
        },
      ]
    }
    
    useEffect(() => {
      setPresent(createPresent);
    }, []);

当我尝试更新 礼物 在内部使用循环状态 useEffect()在案例 1 中，礼物 状态没有更新。但是当我在 useEffect() 之外单独使用循环时并创建一个数组，然后分配给 礼物 情况 2 中的状态，礼物 状态正在更新。
这背后的原因是什么？为什么礼物 在案例 1 中状态没有更新？

Answer 1

在以下情况下，您的 present state 不是每个后续状态更新的结果，而是您拥有的初始状态，即 [] . React 将 批 这些更新并没有使它们同步发生，所以只有一个状态更新，present更新到您的 for loop 中的最新条目.

  const [present, setPresent] = useState([]);
     
    useEffect(() => {
    
        for (var j = 1; j <= totalPeriod; j++) {
          setPresent([
            ...present,
            {
              period: j,
              present: true,
            },
          ]);
        }
    
    }, []);

在以下情况下，您首先组装 createPresent包含您需要的所有值的数组，最后调用 状态更新函数即setPresent设置状态。

const [present, setPresent] = useState([]);
    
    let createPresent = [];
    for (var j = 1; j <= totalPeriod; j++) {
      createPresent = [
        ...createPresent,
        {
          period: j,
          present: true,
        },
      ]
    }
    
    useEffect(() => {
      setPresent(createPresent);
    }, []);

为了实现第二个行为，您可以使用 状态更新器回调，它保存先前的状态作为参数 像这样:-

  const [present, setPresent] = useState([]);
     
    useEffect(() => {
    
        for (let j = 1; j <= totalPeriod; j++) {
          setPresent(prevState=>[
            ...prevState,
            {
              period: j,
              present: true,
            },
          ]);
        }
    
    }, []);

这里还有状态更新是批量 但是在更新下一个状态之前会考虑以前的状态。
当我说 批量 状态更新，我的意思是只有一个渲染。您可以通过执行 console.log('render') 来验证。在组件的函数体中。
注意 let 的使用而不是 var从 let 开始限定范围，您将获得变量 j 的准确值.