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

Question

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

当我记录页面时，它首先触发渲染 > componentDidMount > 渲染，所以我会假设页面确实更新了正确的值，但它仍然显示页眉/页脚。

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

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

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