React层级传值时孙组件未识别父组件props变更问题求解

根因分析 #

• 参数名不匹配：组件A跳转时传入的路由参数key为selectedPeripheral，但组件B构造函数中取值时用了peripheral，key不对应会导致取值异常。
• 页面未重新挂载：React Navigation中调用navigate跳转到已存在于路由栈的页面时，页面组件不会重新触发挂载流程，constructor仅会在组件首次初始化时执行一次，后续路由参数更新不会修改组件B的state值，导致传给组件C的props一直是首次的旧数据。

解决方案 #

方案1：直接透传参数（推荐，代码最精简） #

如果组件B不需要对该参数做额外的本地状态管理，直接删掉不必要的state定义，直接透传路由参数即可：

class ComponentB extends Component {
  // 可删除constructor中selectedLight相关的state定义
  render() {
    return (
      <ComponentC
        selectedPeripheral={this.props.route.params?.selectedPeripheral}
      />
    )
  }
}

路由参数更新时组件B的props会同步变化，透传给组件C的props也会自动更新，触发组件C重新渲染。

方案2：保留state缓存参数 #

如果组件B需要用该参数做其他本地业务逻辑，新增componentDidUpdate生命周期监听路由参数变化，同步更新本地state：

class ComponentB extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 修正参数key
      selectedLight: this.props.route.params?.selectedPeripheral
    }
  }

  componentDidUpdate(prevProps) {
    const prevId = prevProps.route.params?.selectedPeripheral?.id
    const currentId = this.props.route.params?.selectedPeripheral?.id
    // 外设ID变化时更新state
    if (prevId !== currentId) {
      this.setState({
        selectedLight: this.props.route.params.selectedPeripheral
      })
    }
  }

  render() {
    return (
      <ComponentC
        selectedPeripheral={this.state.selectedLight}
      />
    )
  }
}

可选优化 #

如果组件C内部存在私有状态需要每次切换外设时重置，可以给组件C绑定key属性为外设ID，确保每次切换外设时组件C完全重新挂载：

<ComponentC
  key={this.state.selectedLight?.id}
  selectedPeripheral={this.state.selectedLight}
/>

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