ReactJS子组件未随父组件状态更新问题求助

嘿，我来帮你捋清楚这个问题～

为什么子组件没更新？ #

核心问题出在子组件的初始化逻辑上：你在DashAppBar的构造函数里把父组件传入的softwareInfo存到了自己的state里，但构造函数只会在组件第一次挂载时执行一次。当父组件通过AJAX更新softwareInfo并调用setState后，父组件会重新渲染，DashAppBar的props也确实拿到了新值，但子组件的state并没有跟着更新——因为构造函数不会再跑一遍，所以子组件还是用着初始化时的旧state值。

两种解决办法 #

方案1：直接使用props（推荐）

既然softwareInfo是由父组件管理的状态，子组件完全没必要自己存一份state，直接读取props就好。修改DashAppBar里显示软件名称的代码：

const software_name = ( 
  <FormattedMessage 
    id="software_name" 
    defaultMessage="{software_name}" 
    values={{ software_name: this.props.softwareInfo.software_name }} 
  /> 
);

这样父组件更新softwareInfo后，子组件的props会同步更新，触发重新渲染，自然就能显示最新的软件名称了。这种方式也符合React的单向数据流原则，减少状态不同步的风险。

方案2：监听props变化同步state（仅当必须存state时使用）

如果你因为业务需求，必须把softwareInfo存在子组件的state里，那需要手动监听props的变化，在props更新时同步更新state。在DashAppBar类组件中添加componentDidUpdate生命周期钩子：

componentDidUpdate(prevProps) {
  // 比较新旧props中的softwareInfo，如果不同就更新state
  // 注意：如果是嵌套对象，浅比较可能不够，需要深度对比（比如用JSON.stringify或lodash.isEqual）
  if (prevProps.softwareInfo.software_name !== this.props.softwareInfo.software_name ||
      prevProps.softwareInfo.default_dash !== this.props.softwareInfo.default_dash ||
      prevProps.softwareInfo.color_theme !== this.props.softwareInfo.color_theme) {
    this.setState({ software_settings: this.props.softwareInfo });
  }
}

这样每当父组件传来的softwareInfo变化时，子组件的state就会跟着更新，进而重新渲染显示新值。

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