为什么setState不触发重新渲染？

Question

我正尝试触发重新渲染以排除页眉和页脚。

当我登录页面时，它首先触发render> componentDidMount> render，因此我认为页面确实使用正确的值进行了更新，但是仍然显示页眉/页脚。

constructor() {
    super();
    this.state = {
      header: true,
      footer: true,
    };
  }
  componentDidMount() {
    if (window.location.pathname === '/404-page') {
      this.setState({ header: false, footer: false });
    } else if (window.location.pathname === '/form') {
      this.setState({ header: true, footer: false });
    } else if (window.location.pathname.length > 6) {
      this.setState({ header: true, footer: false });
    }
  }
 render() {
    {header ? <Header /> : null}
 }

结果是页眉/页脚不再存在。

Answer 1

首先，您必须从header解构属性state。然后明确地return

 render() {
    const {header} = this.state
    return header ? <Header /> : null
 }