Question

我在Nextjs中使用切换按钮有一个简单的组件。我想根据'isOpen'是true还是false来更改按钮的内容。但是，控制台显示isOpen始终设置为false。这是代码：

export class Hamburger extends Component {

constructor(props) {
    super(props);
    this.state = { isOpen: false }
    this.toggle = this.toggle.bind(this);
}

toggle() {
    this.setState = ({isOpen: !this.state.isOpen})
    console.log(this.state.isOpen)
}

render() {
    return (
        <button onClick={this.toggle} type="button">
            {this.state.isOpen ? <Component1 /> : <Component2 /> }
        </button>
    )
}
}

export default Hamburger

我整个上午都在研究SE的答案，但我仍然不明白为什么isOpen不会改变。

任何帮助将不胜感激！！干杯。

Answer 1

如果您的新状态取决于您之前的状态，请通过以下回调调用setState：

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

Answer 2

如果您的新状态更新取决于先前的状态，请始终使用“ setState”的功能形式，该形式接受返回新状态的函数作为参数。

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

Answer 3

您可以先检查默认值 this.setState =（{isOpen：this.state.isOpen？false：true}）

React Toggle不更改布尔值

3 个答案: