setState() 不会从我的代码中重新呈现

Question

I gave onClick event for 3 items.
When I click the button, each button is going to call clickHandler and clickHandler calls changeSelect with event.target.id .
In the function, I want to change state value by suing this.setState() and it works well.
But the problem is, after I call this.setState() , it does not trigger render() .
What is the problem with my code?

class About extends React.Component {
  state = {
    main: true,
    data1: false,
    data2: false
  };
  changeSelect = id => {
    if (id === "select1") {
      this.setState(current => {
        current.main = true;
        current.data1 = false;
        current.data2 = false;
      });
    } else if (id === "select2") {
      this.setState(current => {
        current.main = false;
        current.data1 = true;
        current.data2 = false;
      });
    } else if (id === "select3") {
      this.setState(current => {
        current.main = false;
        current.data1 = false;
        current.data2 = true;
      });
    }
  };
  clickHandler = event => {
    event.preventDefault();
    this.changeSelect(event.target.id);
  };
  render() {
    console.log('render called')
    console.log(this.state)
    return (
      <div>
        <section className="selects">
          <div
            id="select1"
            className="select"
            onClick={this.clickHandler}
          ></div>
          <div
            id="select2"
            className="select"
            onClick={this.clickHandler}
          ></div>
          <div
            id="select3"
            className="select"
            onClick={this.clickHandler}
          ></div>
        </section>
        <section className="about">
          {this.state.main ? (
            "hi"
          ) : this.state.data1 ? (
            "bye"
          ) : (
            "oh"
          )}
        </section>
      </div>
    );
  }
}

Answer 1

Do not mutate state -> return a new one

changeSelect = id => {
  if (id === "select1") {
    this.setState(current => ({
      main: true,
      data1: false,
      data2: false,
    }));
  } else if (id === "select2") {
    this.setState(current => ({
      main: false,
      data1: true,
      data2: false,
    }));
  } else if (id === "select3") {
    this.setState(current => ({
      main: false,
      data1: false,
      data2:true,
    }));
  }
};

Note: if your next state doesn't depend on previous state value - you can omit function call and do it like that:

this.setState({
   main: false,
   data1: false,
   data2: true,
});

:)

Answer 2

When you use this syntax on setState you need to return your new state :

//You are not returning your state just assigning the values
this.setState(current => {
        current.main = true;
        current.data1 = false;
        current.data2 = false;
      });

Just modify the state this way

this.setState({
        main:true,
        data1:false,
        data2:false,
      });

Answer 3

After looking into the code. The issue is how setState is being used mutating the state won't re-render and instead return a new state.

Here is the ref:

if (id === "select1") {
    this.setState({
      main: true,
      data1: false,
      data2: false,
    });
}

Note: You are not making use of current so you can avoid the updater method of setState .

Answer 4

As previously said by @max, You're mutating the state, and your setState isn't Returning anything,

Your set State

this.setState(current => {
        current.main = false;
        current.data1 = true;
        current.data2 = false;
      });

I would re-write your code like this to reduce conditions

state = {
    select1: true,
    select2: false,
    select3: false
};

const defaultState = {
  select1: false,
  select2: false,
  select3: false
}

changeSelect = id => {
    this.setState({ ...defaultState, [id]: true });
};

Answer 5

1. You can use key for re-rendering component if key changes.
2. Use key as per your choice, i have used Math.random() for ex.

========================================================================

class App extends Component {
  state = {
    main: true,
    data1: false,
    data2: false,
    key:Math.random()
  };
changeSelect = id => {
    if (id === "select1") {
      this.setState(current => {
        current.main = true;
        current.data1 = false;
        current.data2 = false;
      });
    } else if (id === "select2") {
      this.setState(current => {
        current.main = false;
        current.data1 = true;
        current.data2 = false;
      });
    } else if (id === "select3") {
      this.setState(current => {
        current.main = false;
        current.data1 = false;
        current.data2 = true;
      });
    }
  this.setState({key:Math.random()})
  };

 render() {


    return (
      <div key={this.state.key}>
          {/*your code*/}
      </div>
    );
  }

}

export default App;