为啥 useState 钩子在 useEffect() 中使用循环时不更新

Posted 2023-02-16

【中文标题】为啥 useState 钩子在 useEffect() 中使用循环时不更新

【英文标题】：Why useState hook don't update while using loop inside useEffect()为什么 useState 钩子在 useEffect() 中使用循环时不更新

【发布时间】：2021-06-08 02:48:09

【问题描述】：

案例一：

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

案例 2：

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

当我在案例 1 中尝试使用 useEffect() 内部的循环更新 present 状态时，present 状态不会更新。但是，当我在useEffect() 之外单独使用循环并创建一个数组，然后在情况 2 中将其分配给 present 状态时，present 状态正在更新。

这背后的原因是什么？为什么在案例 1 中当前状态没有更新？

【参考方案1】：

您在案例 1 中所做的假设是 setPresent 调用是同步的，并且它会立即更新 present，而实际上 React 中的状态更新几乎总是异步的。因此for (var j = 1; j <= totalPeriod; j++) 中的present 变量将等于原始值，即一个空数组[]。所以本质上，你是在一遍又一遍地设置状态：

  [
      ...[],
     
        period: j,
        present: true,
     ,
  ]

这将导致您的状态更新为for 循环创建的最后一个数组。因此，如果 totalPeriod 等于 5，您的状态最终将是 [period: 5, present: true] 而不是 [period: 1, present: true, period: 2, present: true, ... ]

在案例 2 中，一切都非常简单，您组装数组而不弄乱状态变量，然后一次性设置状态。就像你在这种情况下应该做的那样。

【讨论】：

假设我们有totalPeriod = 3，你的意思是它永远不会被更新？

@Blessing 不管totalPeriod 是什么，present 总是会成为 for 循环产生的最后一个对象。所以如果是 3，present 最终会变成 period: 3, present: true

@codermonkey 如果我明白你的意思，你的意思是因为state 是asynchronous，所以第一次迭代会发生，如果它试图更新状态，它会失败，因为state 不会立即更新，然后整个循环将结束而不更新 state 对吗？

@Blessing 你几乎是正确的。 setPresent 是异步的，因此只有循环的最后一个操作才会真正注册到它。

@codermonkey 非常感谢您的解释。

【参考方案2】：

在以下情况下，您的present 状态不是每个后续状态更新的结果，而是您拥有的初始状态[]。 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 的准确值。

【参考方案3】：

除了其他答案：

在 React 组件中更新状态时，您需要牢记一些关键点。 首先 React 状态中的更新状态不是同步的，因此除非你异步触发它，否则它将被批处理。

state =  count: 0;
increment() 
    this.setState( count: this.state.count + 1);
    this.setState( count: this.state.count + 1);
    this.setState( count: this.state.count + 1);
    console.log(this.state.count) // 0


increment() 
console.log(this.state.count); // 1

并且，调用incemenent()完成后this.state.count的最终值为1

因为 React 批处理所有调用，并找出结果，然后有效地进行更改。这种纯 javascript 代码，在最后一个获胜的地方合并

newState = Object.assign(
    ,
    firstSetStateCall,
    secondSetStateCall,
    thirdSetStateCall,
);

所以，我们可以说这里的一切都与 JavaScript 对象合并有关。所以还有另一种很酷的方法，我们在 setState 中传递一个函数而不是 object。

其次，在 react hooks useState 的情况下，updating function(useState() 返回的数组的第二个元素) 不会重新渲染状态对象的内容更改，状态对象的引用有被改变。例如：这里我创建了沙盒：link

如果我没有更改数组的引用（即状态），它就不会重新渲染组件。

 for (let key in newState) 
      newStateToBeSent[key] = newState[key]; // chnaging the reference