reactjs - Next.js 状态改变不重新渲染 UI

Question

我正在尝试使用 Next.js 在 React 中有条件地呈现一个元素。但是，我的组件 UI 不会在状态更改时更新。

我已验证调用 this.setState 后状态发生了变化，但 UI 保持不变。

预期 UI 在单击 h5“meeee”后显示“naaaah”。在setState变更后的回调中可以看到this.state.test为false。

class Sidebar extends React.Component {
  constructor() {
    super();
    this.state = {
      test: true,
      sections: [
        {
          title: "Getting Started",
          collapsed: false,
          subsections: ["intro", "about", "zeppy"]
        }
      ]
    };
    this.toggleTrue.bind(this);
  }

  toggleTrue() {
    this.setState(
      state => {
        state.test = false;
      },
      state => {
        console.log("done", this.state);
      }
    );
  }

render() {
    return (
<div>
        {this.state.test ? (
          <h5 onClick={() => this.toggleTrue()}>meeee</h5>
        ) : (
          <h5>nahhh</h5>
        )}
</div>)
}

Answer 1

您的 setState() 更新器应该返回对状态的更新，而不是直接编辑状态:

  toggleTrue() {
    this.setState(
      state => { return {
        test: false;
      }},
      state => {
        console.log("done", this.state);
      }
    );
  }

为了说明它正在返回一个状态对象，我已经说得有点冗长了。您不需要返回完整的状态对象，只需返回您想要更新的字段