Javascript 反应设置状态未正确更新

这将根据运行此代码之前所选的

值打印除零以外的值。基本上，setState什么都不做，我不知道为什么

任何帮助都将不胜感激

编辑-这里还有一些代码

this.setState({ selected: 0 }, () => {
    console.log("selected value: " + this.state.selected);
}); 

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
选择的var=0；
此.state={
已选：已选
};
this.handleTap=this.handleTap.bind（this）；
}
取消选择（）{
this.setState（{selected:0}，（）=>{
console.log（“selected:+this.state.selected”）；
}); 
}
handleTap（）{
所选变量=this.state.selected；
选定++；
如果（选择>=2）{
这个参数是。取消选择（）；
}
this.setState（{selected:selected}）；
}
render（）{
返回(
this.handleTap（）}样式={{宽度：“100px”，高度：“100px”，背景色：“黑色”}>
);
}
}
导出默认应用程序；

我现在相信我知道这个问题。我认为在调用
deselect（）
之后调用
handleTap（）
中的setState会使所选值保持在大于2的值。
问题是在if条件之后，添加一个else（如下所示）可以解决问题

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    var selected = 0;

    this.state = {
      selected: selected
    };

    this.handleTap = this.handleTap.bind(this);
  }

  deselect() {
    this.setState({ selected: 0 }, () => {
      console.log("selected: " + this.state.selected);
    }); 
  }

  handleTap() {
    var selected = this.state.selected;

    selected++;

    if(selected >= 2) {
      this.deselect();
    }

    this.setState({selected: selected});
  }

  render() {
    return (
      <div onPointerDown={() => this.handleTap()} style={{width: "100px", height: "100px", backgroundColor: "black"}}></div>
    );
  }
}

export default App;

问题就在这里

    handleTap() {
      var selected = this.state.selected;
      selected++;
      if(selected >= 2) {
        this.deselect();
      } else {
      this.setState({selected: selected});
      }
    }

deselect（）
设置状态，然后右键调用另一个
setState
设置所选值。只需添加一个
else
语句即可修复此问题（因此回调中的
console.log
始终为0-在
将状态设置为0之后）


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
选择的var=0；
此.state={
已选：已选
};
}
取消选择（）{
this.setState（{selected:0}，（）=>{
console.log（“selected:+this.state.selected”）；
}); 
}
handleTap（）{
所选变量=this.state.selected；
选定++；
如果（选择>=2）{
这个参数是。取消选择（）；
}
否则{
this.setState（{selected:selected}）；
}
}
render（）{
返回(
this.handleTap（）}
风格={颜色：“白色”，宽度：“100px”，高度：“100px”，背景颜色：“黑色”}
>
状态：{this.State.selected}
);
}
}
ReactDOM.render(
,
document.getElementById（“react”）
);
您的问题是
handleTap
。React状态更新是异步和“整理”的，这意味着在单个函数中多次调用
setState
意味着它们都将排队并被处理

if(selected >= 2) {
  this.deselect();
}

this.setState({selected: selected});

在这里，您要设置两次状态，但由于您没有使用以前的状态进行功能更新，因此最后一次
setState
调用胜过所有以前的调用

相反，每个点击手柄只能调用一个
setState

handleTap() {
  var selected = this.state.selected;

  selected++;

  if(selected >= 2) {
    this.deselect();
  }

  this.setState({selected: selected});
}

应该可以，并且始终打印0。需要更多的上下文，你发的几行没有问题嗨，欢迎来到stackoverflow。这里几乎不存在上下文。请提供一个准确再现您的问题的示例。通常情况下，您需要包含一个完整的组件，以便我们可以跟踪您的状态何时何地发生变化。很酷的bug，您可以向我们展示更多相关的代码吗？这将有助于查看包含组件及其构造函数。您可以单击“编辑”按钮，编辑您的问题。给我们更多code@SydneyY不幸的是，我不能。我在尝试删除此问题时收到消息“您无法删除此问题，因为其他人已投入时间和精力来回答此问题”。是的，在显示更多代码并确定问题后，我已编辑了答案。目前，它已按预期运行。
handleTap() {
  var selected = this.state.selected;

  console.log("current selected", selected);

  selected++;

  if (selected >= 2) {
    this.deselect();
  } else {
    this.setState({ selected: selected });
  }
}