React setState不更新状态

Question

所以我有这个：

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({dealersOverallTotal: total});
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal只是一个数字[1, 5, 9]数组，例如 但是this.state.dealersOverallTotal没有给出正确的总数，total呢？我甚至提出了超时延迟，看看是否解决了这个问题。 任何明显的或我应该发布更多的代码？

Answer 1

setState()通常是异步的，这意味着当你console.log状态时，它还没有更新。尝试将日志放入setState()方法的回调中。它在状态更改完成后执行：

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

Answer 2

setState是异步的。您可以使用回调方法来获取更新状态。

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

Answer 3

($)(\d+) 需要时间来改变价值，而javascript为setState()，因此asynchronous会在console.log()变异值之前执行，因此您会看到结果

要解决此问题，请记录setState中的值

callback function of setState

Answer 4

setstate在react中是异步的，因此要在控制台中查看更新的状态，请使用如下所示的回调（回调函数将在setstate更新后执行）

“不建议使用以下方法”，但是为了理解，如果直接更改状态，则可以在下一行看到更新后的状态。我再说一遍，这是“不推荐”

Answer 5

使用异步/等待

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}

Answer 6

只需在您的代码中添加componentDidUpdate(){}方法即可，它将起作用。 您可以在此处检查本地响应的生命周期：

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8

Answer 7

我遇到了一些复杂的代码，但现有建议中的任何内容对我都没有效果。

我的问题是setState发生在组件之一发出的回调函数中。而且我的怀疑是，通话是同步进行的，这完全阻止了setState设置状态。

简单地说，我有这样的东西：

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

我必须“修复”的方法是像这样将doUpdate()放入setTimeout中：

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

不理想，但否则将是一个重大的重构。

Answer 8

在使用钩子的情况下，应使用useEffect钩子。

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

Answer 9

我多次设置反应状态时遇到问题（它始终使用默认状态）。遵循此react/github问题对我有用

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

Answer 10

除了注意 setState 的异步特性之外，还要注意您可能有相互竞争的事件处理程序，一个执行您想要的状态更改，另一个立即再次撤消它。例如，在其父级也处理 onClick 的组件上的 onClick。通过添加跟踪进行检查。使用 e.stopPropagation 防止这种情况发生。