单击按钮时，不会更新先前的状态

Question

我有这个 React Class component，但我无法让按钮文本从 on 更改为 off

import React from 'react';
import ReactDOM from 'react-dom';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      on: true
    }
  }

  handleClick = () => {
    // todo
    this.setState((prevState) => {
      on: !prevState.on
    })
  }

  render() {
    const {
      on
    } = this.state;
    return ( <
      button onClick = {this.handleClick} >
      {
        on ? "On" : "Off"
      } < /button>
    );
  }
}

ReactDOM.render( <
  Toggle / > ,
  document.getElementById('root')
);

我想每次单击按钮时它都会看到以前的状态并且会更新。

Answer 1

您只是漏掉了一些括号。如果你想隐式return一个对象，你必须把它们。

  handleClick = () => {
    this.setState(prevState => ({
      on: !prevState.on
    }));
  };

检查结果here

单击按钮时，不会更新先前的状态

When button is clicked, previous state is not updated

setstate

reactjs

react-class-based-component