反应setState不更新状态

所以我有这个：

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呢？我什至设置了超时延迟，以查看是否可以解决问题。任何明显的还是我应该发布更多代码？

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

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

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

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

使用异步/等待

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

该setState()操作是异步的，因此您console.log()将在setState()更改值之前执行您的操作，因此您会看到结果。

要解决此问题，请在的回调函数中记录值setState()，例如：

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

如果是钩子，则应使用useEffect钩子。

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

setFruit('Apple');

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

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

下面的方法“不推荐”，但是为了理解，如果直接改变状态，您可以在下一行看到更新的状态。我重复这是“不推荐”

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

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

多次设置反应状态（它始终使用默认状态）时出现问题。以下这个react / github问题对我有用

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

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

在使用一些复杂的代码的情况下，我也遇到了同样的情况，现有建议中的任何内容对我都没有用。

我的问题是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);
}

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