React状态更新后子组件未触发重渲染问题排查

这个问题本质是多数据源状态不同步+生命周期时机错位导致的：

1. 你在子组件TopBar内部冗余维护了一份login状态，这份状态仅在组件首次挂载的componentDidMount阶段赋值一次，后续父组件的props更新不会自动修改子组件内部的独立state。
2. 登录校验逻辑放在子组件挂载后异步执行，等父组件完成JWT校验、更新name字段触发重渲染时，子组件render方法的分支判断依赖的始终是自己内部存储的旧login值，和父组件传进来的最新props完全脱节。

你在React DevTools里看到props值正确但页面不更新，就是因为render逻辑根本没用到最新的props做判断，读的是子组件自己存的过期state。
另外你贴的TopBarrender代码还有个语法问题：返回的两个并列<li>没有根节点包裹，正常运行需要补一个Fragment或者外层容器。

推荐方案：遵循单一数据源原则，移除子组件冗余状态 #

React状态管理的核心原则是同一份状态只在最上层需要用到它的公共父组件维护，子组件只负责接收props渲染，不要自己存副本。

1. 把登录态、登录校验逻辑全部收归父组件App维护，不要让子组件触发父组件的state更新：

// App.js
class App extends React.Component {
  state = {
    name: '',
    isLoggedIn: false // 登录态直接存在父组件state，全局唯一
  }

  // 父组件挂载时统一做登录校验，只执行一次
  async componentDidMount() {
    // 替换成你原来校验cookie中JWT的逻辑
    const tokenValid = checkJsonWebTokenFromCookie()
    if (tokenValid) {
      this.setState({
        isLoggedIn: true,
        name: parseUserNameFromToken() // 你原来给name赋值的逻辑
      })
    }
  }

  render() {
    return (
      <div className="App">
        <Topbar 
          name={this.state.name} 
          isLoggedIn={this.state.isLoggedIn} 
        />
      </div>
    )
  }
}

2. 精简TopBar组件，删除内部的login状态和componentDidMount里的校验逻辑，直接从props取值渲染：

class TopBar extends React.Component {
  // 删掉原constructor里的login状态定义，删掉componentDidMount里的登录校验逻辑
  render() {
    return (
      <> {/* 补根节点解决并列元素语法错误 */}
        {this.props.isLoggedIn &&
          <li className="nav-item">
            Welcome <a href="#account">{this.props.name}</a> | <a href="">Logout</a>
          </li>
        }
        {!this.props.isLoggedIn &&
          <li className="navItem">
            <a href="#login" onClick={this.showModal}>Sign In</a>
          </li>
        }
      </>
    )
  }
}

改完之后父组件只要更新state，子组件会自动拿到最新props触发重渲染，完全不会出现状态不同步的问题。

临时兼容方案（不推荐长期使用） #

如果暂时没法重构父组件逻辑，可以在子组件中加componentDidUpdate生命周期，监听props变化同步内部state，本质是给冗余状态做同步，长期维护容易出遗漏：

class TopBar extends React.Component {
  state = {
    login: false
  }

  async componentDidMount() {
    let result = await this.props.isLoggedIn();
    this.setState({'login' : result});
  }

  // 监听props变化，同步内部状态
  componentDidUpdate(prevProps) {
    if (prevProps.name !== this.props.name && !!this.props.name) {
      this.setState({login: true})
    }
  }

  // render逻辑保持不变，记得补根节点
}

内容的提问来源于stack exchange，提问作者user17615929