Question

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

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

点击h5“ meeee”后，预期的UI将显示“ 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

您的cat chef_13.10.0-1/DEBIAN/control Package: chef-client Version: 13.10.0-1 Section: base Priority: optional Architecture: any Maintainer: Prarthana Shedge <prsh@xyz.com> Description: Basic Chef Client Test更新程序应将更新返回至状态，而不是直接编辑状态：

setState()

我已经指出了它正在返回状态对象，这有点冗长。您不需要返回完整状态的对象，只需返回要更新的字段

Answer 2

实际上，您正在使事情复杂化，您应该简单地做到这一点，

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

Demo

注意：在更新嵌套状态时，您应该使用previous state。

使用以前的状态，您可以执行此操作，

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

Next.js状态更改未重新呈现UI

2 个答案: