React setState 没有正确更新

Question

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

This prints values other than zero depending on what value selected was before running this code. Basically the setState does nothing and I'm not sure why.

Any help would be greatly appreciated.

Edit - Here is some more code

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;

I now believe I know the issue. I think calling setState in handleTap() after calling deselect() is making the selected value stay at a value greater than two.

Answer 1

Your issue is handleTap . React state updates are asynchronous and "collated", meaning, calling setState several times within a single function means they all get queued up and processed.

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

  selected++;

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

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

Here you are setting state twice, but since you aren't doing functional updates using the previous state, the last setState call trumps all previous calls.

You should instead only call one setState per tap handle.

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

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

  selected++;

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

Answer 2

The problem was here

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

this.setState({selected: selected});

The deselect() sets the state, and the right afterward, you call another setState to the selected value. It can be fixed by simply adding a else statement (so the console.log inside the callback will always be 0 - after you setState to 0)

 class App extends React.Component { constructor(props) { super(props); var selected = 0; this.state = { selected: selected }; } deselect() { this.setState({ selected: 0 }, () => { console.log("selected: " + this.state.selected); }); } handleTap() { var selected = this.state.selected; selected++; if (selected >= 2) { this.deselect(); } else { this.setState({ selected: selected }); } } render() { return ( <div onPointerDown={() => this.handleTap()} style={{ color: "white", width: "100px", height: "100px", backgroundColor: "black" }} > State: {this.state.selected} </div> ); } } ReactDOM.render( <App />, document.getElementById("react") );

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

The problem was after the if condition, adding an else as shown below would solve the problem.

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