React组件从Props初始化状态无值问题排查

嘿，这个问题我之前也碰到过，核心原因其实是API请求的异步特性在搞鬼！

你想啊，App.js里调用API拿数据是个异步操作——当你的ListBooks组件执行constructor的时候，API请求可能还在pending状态，App.js还没拿到返回的数据，这时候传给ListBooks的props.books自然是空的或者undefined，所以你在constructor里打印this.state.x才会看不到值。

那怎么解决呢？给你两个常用的方案：

方案一：在组件更新时同步状态（类组件生命周期） #

用componentDidUpdate生命周期钩子，当props.books更新（也就是API数据返回后），再把新的props同步到state里：

class ListBooks extends Component {
  constructor(props) {
    super(props);
    this.state = { x: props.books || [] }; // 先给个默认空数组避免报错
  }

  componentDidUpdate(prevProps) {
    // 只有当props.books真的变化了才更新state，防止无限循环
    if (prevProps.books !== this.props.books) {
      this.setState({ x: this.props.books });
    }
  }

  // ...其他组件代码
}

方案二：延迟渲染组件，等数据就绪再传 #

在App.js里，先判断API数据是否已经获取到，只有当books存在的时候，再渲染ListBooks组件：

// App.js的render方法里
render() {
  return (
    <div className="app">
      {/* 只有this.state.books有值的时候才渲染子组件 */}
      {this.state.books && <ListBooks books={this.state.books} />}
    </div>
  );
}

这样ListBooks的constructor执行时，props.books已经是完整的API数据了，初始状态就能正确设置。

另外补充一句，如果你的项目允许，也可以考虑用getDerivedStateFromProps这个静态生命周期方法来处理props到state的同步，但componentDidUpdate的写法更直观易懂，新手用起来不容易踩坑。

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