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

Question

案例一：

    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 中当前状态没有更新？

Answer 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 中，一切都非常简单，您组装数组而不弄乱状态变量，然后一次性设置状态。就像你在这种情况下应该做的那样。

Answer 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 的准确值。

Answer 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
    }