Question

案例 1：

    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() 之外单独使用循环并创建一个数组时，我将其分配给 present 状态（在情况 2 中），present 状态正在更新.

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

Answer 1

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

  [
      ...[],
     {
        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 中的更新 state 不是同步的，因此除非你异步触发，否则会被批处理。

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

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

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

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

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

其次，在反应钩子 useState 的情况下，updating function（由 useState() 返回的数组的第二个元素）不会在状态对象的内容更改时重新呈现，引用必须更改状态对象。例如：这里我创建了沙箱：link

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

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

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

3 个答案: