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

Question

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

当我登录页面时，它首先触发 render > componentDidMount > render，所以我假设页面确实更新了正确的值，但它仍然显示 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}
 }

结果是 header/footer 不存在了。

Answer 1

首先你必须从 state 解构属性 header。然后显式 return

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

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

Why does the setState not trigger a re-render?

javascript

routing

reactjs