为什么我需要添加 .isToggleOn？

Question

在 React Docs 中，处理事件文章：如何将状态更新为相反的布尔值，我有一个问题。

为什么要在isToggleOn: !prevState

后面加上.isToggleOn

为什么我不能简单地写 isToggleOn: !prevState？

prevState 是 {isToggleOn: true}。所以 !prevState 应该是 {isToggleOn: false}。我对吗？这让我感到困惑，因为它听起来像 {property: opposite of the boolean.property}.

我知道 prevState 是什么，我知道 .setState() 正在更新状态。请帮助我更好地理解这一点。提前致谢！

 class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
        }));
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        );
      }
    }
    
    ReactDOM.render(
      <Toggle />,
      document.getElementById('root')
    );

Answer 1

prevState是一个对象，所以不能用"!"来改变其中的属性。在整个对象上。您需要更改此对象中的值，该对象具有键“isToggleOn”。因此，通过使用

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

您通过键“isToggleOn”访问此值并将其更改为相反的值

Answer 2

在react中，state对象是一个值的集合，而不仅仅是一个值。为了更新状态的特定部分，您需要传递该特定状态值的键，以便它知道要更改什么。

例如，您的状态值可能是这样的：

this.state = {
  isToggleOn: true,
  otherValue: false
}

并且当您更新时，只会更新您传递的特定键的值。所以如果你要运行

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

只有 isToggleOn 值会更改，otherValue 字段将保持为 false。

为什么我需要添加 .isToggleOn？

Why do I need to add .isToggleOn?

javascript

reactjs

toggle

setstate