setState 不是永久的

Question

我正在尝试创建一个具有可折叠选项的侧边菜单。

下面是我的代码：

export default class CRSideMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fprActive: true
    };
    autoBind(this);
  }

  toggleFPR() {
    console.log('Setting fprActive from ', this.state.fprActive, ' to ', !this.state.fprActive);
    this.setState({
      fprActive: !this.state.fprActive
    });
  }

  render() {
    console.log('render', this.state.fprActive);
    return (
      <ul className='list-group list-group-nav'>
        <li>
          <a 
            href='#' 
            className={classnames('list-group-item', this.state.fprActive && 'active', 'has-subnav')}
            onClick={this.toggleFPR} >
            FPR
          </a>
          <ul className='list-group list-group-nav'>
            <li>
              <a href='' className='list-group-item'>FR</a>
            </li>
          </ul>
        </li>
      </ul>
    );
  }
}

当我在 render() 方法中打印出 this.state.fprActive 时，我看到以下内容：

• 将 fprActive 从 true 设置为 false
• 渲染错误
• 真实呈现

当我只点击一次时，为什么我的 fprActive 会自动设置为“true”？

Answer 1

我无法在此重现该问题，但症状表明当您单击锚点时您的页面正在刷新，因为您没有阻止默认操作。让toggleFPR 在它收到的事件对象上调用preventDefault：

toggleFPR(event) {
//        ^^^^^ ------------ ***
  event.preventDefault(); // ***
  console.log('Setting fprActive from ', this.state.fprActive, ' to ', !this.state.fprActive);
  this.setState({
    fprActive: !this.state.fprActive
  });
}

---

另外：你在这里打破了the fundamental React rules 之一：

console.log('Setting fprActive from ', this.state.fprActive, ' to ', !this.state.fprActive);
this.setState({
  fprActive: !this.state.fprActive
});

根据现有状态设置状态时，您必须使用回调版本，而不是您将对象传入的版本：

this.setState(({fprActive}) => {
  console.log('Setting fprActive from ', fprActive, ' to ', !fprActive);
  return {fprActive: !fprActive};
});

如果您不这样做，它会在大部分时间工作，但有时会以难以诊断的方式失败。