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

Question

I'am trying to trigger a re-render to exclude my header and footer.

When I log the page, it first triggers render > componentDidMount > render, so I would assume the page did update with the correct values, but it still shows the header/footer.

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}
 }

The result would be that the header/footer aren't there anymore.

Answer 1

First you have to destructure the property header from state . Then explictly return

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