React setState 不会更新状态。

11 浏览
0 Comments

React setState 不会更新状态。

我有这个代码：

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);
console.log(total, 'tittal'); // 输出正确的总数
setTimeout(() => {
  this.setState({ dealersOverallTotal: total });
}, 10);
console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); // 输出错误的总数

newDealersDeckTotal 就是一个数字数组 [1, 5, 9]。

然而，this.state.dealersOverallTotal 没有给出正确的总数，但是 total 是正确的。我甚至加入了一个延迟来解决这个问题。

有什么明显的问题还是我需要发布更多的代码？

0

3 答案

0 Comments

React的setState方法不更新状态的原因是因为在使用hooks时，需要使用useEffect钩子来确保状态的更新。代码中通过useState创建了一个名为fruit的状态变量，并将其初始化为空字符串。然后使用setFruit方法将其更新为'Apple'。接着使用useEffect钩子来监测fruit变量的变化，并在变化时打印出fruit的值。

useEffect钩子在每次重新渲染时都会运行，当传入数组的项目是状态变量且发生变化时，useEffect钩子就会运行。因此，当fruit发生变化并且组件重新渲染时，useEffect就会运行。

如果将setFruit和console.log fruit放在useEffect之外运行，fruit的值将不会发生变化。

解决这个问题的方法是将setFruit和console.log fruit放在useEffect钩子中运行，这样可以确保在状态变量发生变化时，相关操作能够正确执行。

0
0 Comments

React中的setState方法是异步执行的。如果你想要在更新state之后获取最新的state值，可以使用回调方法。

例如，假设我们有一个changeHandler方法来处理输入框的变化事件，并且想要在更新state之后打印出最新的姓名。我们可以这样写代码：

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
}

在这个例子中，我们通过event.target.value获取输入框的值，并将其作为新的state值来更新yourName属性。在更新state之后，我们使用回调方法来打印最新的state值。

通过这种方式，我们可以确保在state更新完成后再执行需要依赖最新state值的操作。这对于需要在state更新后执行一些操作的情况非常有用。

需要注意的是，setState的异步执行可以提高性能。React会在执行setState方法后，将所有的state更新操作打包成一个批处理，然后再进行实际的state更新。这样可以避免频繁更新state造成的性能问题。

因此，如果你想要获取最新的state值，最好使用回调方法来确保在state更新完成后再执行相关操作。这样可以保证获取到的state值是最新的。

0
0 Comments

React中的setState方法通常是异步的，这意味着在你使用console.log打印state时，它还没有更新。可以尝试将log放在setState方法的回调函数中，该回调函数在状态改变完成后执行:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
});

此外，问题提问者在调用setState之前明确地记录了状态值。

在过去，我也使用过以下代码来解决此问题：`this.setState({someVar: newValue},function(){ console.log("force update"); });` 但是出于某种原因，当我更新代码时，它不再起作用。请问有什么办法可以解决这个问题？

另外，如果你在函数组件中使用useState钩子，上述方法将不起作用。可以使用useEffect钩子在渲染后执行一些操作。

我完全忘记了这是一个异步调用，并尝试了除此之外的所有可能的代码更改。感谢你拯救了我的大脑。

我从未看到输出，而且我试图更新的键变成了undefined。

如果我使用类似zustand这样的状态管理库，该如何做到同样的效果呢？

0