Состояние Reactjs не обновляется

setState является асинхронным. Вместо этого просто предупредите об обратном вызове метода.

if (this.props.overlay) {
  this.setState(
    { className: "wrapper_overlay" },
    () => alert(this.state.className);
  );
}

Примечание: вы можете и должны также использовать shouldComponentUpdate для проверки завершения вызова setState.

Поскольку установить состояние по своей природе является асинхронным, вы можете не увидеть обновленное состояние в предупреждении. Вы можете использовать это в обратном вызове, который будет вызываться после выполнения setstate. нравится

componentDidMount() {
    if (this.props.overlay) {
      this.setState({
        className: "wrapper_overlay"
      }, ()=> {alert(this.state.className);});
   }

Обновления состояния могут быть асинхронными

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

// Wrong
this.setState({
    className: "wrapper_overlay"
  });

To fix it, use a second form of setState() that accepts a function rather than an object.

// Correct
this.setState((state, props) => ({
  className: "wrapper_overlay"
}));

или просто

this.setState(() => ({
  className: "wrapper_overlay"
}));

В React.js работающий программный поток не ожидает установки состояния и продолжает свое выполнение до тех пор, пока не будет выполнена операция, определенная в обратном вызове setState().

Ваше состояние устанавливается, но поскольку ваш alert() находится после setstate, то есть не в обратном вызове setState(), поэтому он получает предыдущее значение, потому что в то время, когда состояние устанавливает новое значение, поток не ожидает, а выполняет следующую инструкцию, которая является alert().

if (this.props.overlay) {
    this.setState({ className: "wrapper_overlay" }, () => alert(this.state.className););
}

Надеюсь, что это работает для вас.

Just use the callback method to update the state, as setState() might work asynchronously.

        this.setState(() => {
            className: "wrapper_clopsed"
        });