React中Store数据就绪后，如何正确设置本地组件状态？

在App.js的constructor里调用了数据获取方法this.props.fetchUser()和this.props.fetchBeers()，将数据存入Store状态。但子组件中尝试获取Store数据时，发现数据不是立即可用的，要等多次输出后才出现。我尝试在componentDidMount()里设置本地状态，但因为数据未就绪失败了，现在只能在render()里通过判断来设置本地状态：

if(this.props.beers.beer.length>0 && this.state.beerArrayLoaded===false){
  this.setState({beerArrayLoaded:true});
  this.setState({BeerArray:this.props.beers.beer});
}

想知道有没有更规范的方式，在Store数据就绪后设置本地状态？

其实你现在的写法存在一个明显的问题：在render方法里调用setState会触发额外的重渲染，极端情况下甚至可能导致无限循环，所以肯定有更优雅、更符合React规范的方式来处理这种场景，下面给你几个常用的可行方案：

1. 使用componentDidUpdate生命周期钩子 #

这是处理props变化最经典的方式，当Store中的数据更新后，组件的props会随之变化，我们可以在这个钩子中加入判断逻辑，来更新本地状态：

componentDidUpdate(prevProps) {
  // 对比前后props中的beer数据，确保只有当数据真正就绪且未加载过时才更新本地状态
  if (this.props.beers.beer.length > 0 && !this.state.beerArrayLoaded) {
    this.setState({
      beerArrayLoaded: true,
      BeerArray: this.props.beers.beer
    });
  }
}

// 别忘了在componentDidMount中也做一次判断，防止初始props就已经带有数据的情况
componentDidMount() {
  if (this.props.beers.beer.length > 0) {
    this.setState({
      beerArrayLoaded: true,
      BeerArray: this.props.beers.beer
    });
  }
}

这种写法既避免了在render中触发setState的风险，又能准确捕捉到Store数据就绪的时机。

2. 使用getDerivedStateFromProps（现代React推荐的纯函数式生命周期） #

如果你想采用更符合React现代规范的写法，可以使用这个静态生命周期钩子，它专门用于根据props的变化来更新state，且本身是纯函数，没有副作用：

static getDerivedStateFromProps(nextProps, prevState) {
  // 当新props中的beer数据就绪且本地状态未标记加载完成时，返回新的state
  if (nextProps.beers.beer.length > 0 && !prevState.beerArrayLoaded) {
    return {
      beerArrayLoaded: true,
      BeerArray: nextProps.beers.beer
    };
  }
  // 返回null表示不需要更新state
  return null;
}

这个方法能覆盖初始渲染和后续props更新的所有场景，不用再单独编写componentDidMount中的判断逻辑，代码更简洁统一。

3. 反思：是否真的需要本地状态？ #

最后想提醒你，如果你的子组件只是基于Store的数据做展示或者简单的逻辑处理，其实完全可以直接使用props中的数据，不需要再复制一份到本地state。这样能减少状态冗余，让组件结构更简洁，同时也避免了同步props和state的麻烦。比如你可以在render中直接处理空数据的情况：

render() {
  const { beer } = this.props.beers;
  // 数据未就绪时展示加载状态
  if (beer.length === 0) {
    return <div>加载中...</div>;
  }
  // 数据就绪后直接使用beer渲染组件内容
  return (
    <div>
      {/* 这里编写你的组件渲染逻辑 */}
    </div>
  );
}

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