Javascript React setState不更新状态

所以我有这个：

let total=newDealersDeckTotal.reduce（函数（a，b）{
返回a+b；
},
0);
console.log（总计“tittal”）//输出正确总数
设置超时（（）=>{
this.setState（{dealersOverallTotal:total}）；
}, 10);
log（this.state.dealersOverallTotal'dealersOverallTotal1'）//输出不正确的总数

newDealersDeckTotal只是一个数字数组。 但是

this.state.dealersOverallTotal

没有给出正确的总数，但是

total

给出了正确的总数？我甚至设置了一个超时延迟，看看这是否解决了问题。 任何明显的或我应该发布更多的代码吗？

setState（）

通常是异步的，这意味着在您

console.log

状态时，它还没有更新。尝试将日志放入

setState（）

方法的回调中。状态更改完成后执行：

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

setState（）

操作是异步的，因此您的

console.log（）

将在

setState（）

变异值之前执行，因此您可以看到结果

要解决此问题，请在

setState（）

的回调函数中记录该值，如：

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

---

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);
}

---

只需在代码中添加

componentDidUpdate（）{}

方法，它就可以工作了。 您可以在此处检查react native的生命周期：

---

如果是钩子，应该使用

useffect

hook

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

setFruit('Apple');

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

---

我在多次设置react状态时遇到了一个问题（它总是使用默认状态）。关注这个问题对我来说很有效

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({...});
}

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

---

不太理想，但否则将是一次重要的重构。

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

---

---

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

@Assan干杯！！除了回答中所说的内容外，在调用

setState

@FelixKling no之前，您还显式地记录了state的值，我在设置之后调用this.state。我以前记录过一个变量。否？由于超时，您的

setState

确实在记录状态后执行。我想你在调试中要做的是将

console.log

部分放在超时内，将

setState

部分放在超时外。除此之外，OP在调用

setState

之前显式记录状态值。这对我也适用，过去我使用过：`This.setState（{someVar:newValue}，function（））{console.log（“force update}”）；但是由于某种原因，当我更新上面描述的代码时，它不再工作了。知道为什么吗？@Jozcar也应该工作，语法不正确（缺少括号）：

this.setState（{someVar:newValue}，function（）{console.log（“force update”）}）

请告诉我应该怎么做才能解决这个问题。我完全忘记了这是一个异步调用的事实，并且做了除此之外所有可能的代码更改，在这里你救了我的大脑免于烧坏。thanksJavaScript始终是同步的。@Santossingh你有一个误解。API调用、超时都是异步发生的。正如您在上面提到javascript是异步的——这是不正确的。它主要是同步的，在某些情况下是异步的。@Santossingh.Ohh这是我的一个错误。没有正确地组成句子非常巧妙地使用回调来确保在后续调用之前更新状态！太好了，它可以与useEffect一起工作。但是为什么呢它需要一个吗？

useffect

在每次重新渲染时运行，并且如果传递到数组中的项是状态变量，并且已更改。因此，当水果更改和组件重新渲染时，该useffect将运行。我在useffect之外运行setFruit和console.log fruit，它不会更改。：/谢谢，就是这样，您必须直接设置变量IABLEW为什么还要显示底部代码？这不是一个“不推荐”的问题，因为它基本上是非法的，而且您已经通过直接改变状态放弃了任何行为保证。只是不要这样做。另外，请不要发布。谢谢。这解决了我的问题，但我将setState（）放在了setTimeout（）中相反，谢谢！

setState

不会返回承诺，所以我不希望它起作用。

this.setState({ email: 'test@example.com' }, () => {
   console.log(this.state.email)
)}