React状态更新后子组件接收props未渲染问题咨询

咱们先从几个最可能的原因入手，一步步解决这个问题：

1. 先检查父组件的state更新方式 #

这是最容易踩的坑！如果你是直接修改this.state而不是用setState，那React根本不会触发组件重新渲染——哪怕你打印this.state.info确实是Hello，子组件拿到的还是旧的props值。

错误写法：

this.state.info = 'Hello'; // 直接修改state，不会触发渲染

正确写法：

this.setState({ info: 'Hello' }, () => {
  console.log(this.state.info); // 这里能确保拿到更新后的state值
});

2. 检查子组件的props接收逻辑 #

有没有可能是子组件里把props名字写错了？比如父组件传的是selectedInfo，子组件里写成了selectedinfo（小写i），或者直接没用到这个props？

比如子组件如果是类组件，要确保render里正确使用this.props.selectedInfo：

class MyComponent extends React.Component {
  render() {
    // 要明确渲染props里的值
    return <div>{this.props.selectedInfo}</div>;
  }
}

如果是函数组件：

const MyComponent = (props) => {
  // 注意props的名字要和父组件传入的完全一致
  return <div>{props.selectedInfo}</div>;
};

另外，还要检查子组件有没有设置默认props覆盖了传入的值，比如：

MyComponent.defaultProps = {
  selectedInfo: '' // 如果默认值是空字符串，可能会覆盖你的传值
};

3. 确认state的类型是否正确 #

有时候你打印this.state.info看起来是Hello，但它可能不是原始的字符串类型，而是String对象（比如通过new String('Hello')创建的）。这时候虽然this.state.info == 'Hello'成立，但this.state.info === 'Hello'不成立，如果子组件里用了严格相等的判断逻辑，就会出问题。

你可以在父组件里打印typeof this.state.info，如果输出是object而不是string，那就是这个问题，改成原始字符串类型即可。

4. 检查父组件是否触发了重新渲染 #

如果父组件是PureComponent，或者自定义了shouldComponentUpdate返回false，那即使state更新了，父组件也不会重新渲染，子组件自然拿不到新的props。

你可以在父组件的render函数里加个日志：

render() {
  console.log('父组件正在渲染');
  return (
    <div>
      {this.state.info}
      <MyComponent index={0} selectedInfo={this.state.info} />
    </div>
  );
}

当你更新state后，如果没看到这个日志，那就是父组件被阻止渲染了，需要调整shouldComponentUpdate的逻辑，或者改用普通的Component。

内容的提问来源于stack exchange，提问作者Jose Cabrera Zuniga