当属性在React中改变时,如何获取数据并设置状态?

请注意以下代码。我知道如何获取数据,并在安装组件后用数据呈现组件。但是组件需要获取其他数据,以便在道具更改时重新呈现。 以前,我可以用 componentWillReceiveProps() 为了轻松实现这一点,但现在不建议使用此方法 setState() 不能叫进来 componentDidUpdate() . 我不知道怎么解决这个问题。

class HotList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      songs: [],
    };
  }

  componentDidMount() {
    this.fetchHotList(this.props.platform);
  }

  // The following method is not recommended for use in current React version.
  // componentWillReceiveProps(nextProps) {
  //   this.fetchHotList(nextProps.platform);
  // }

  // setState() can't be called in componentDidUpdate()
  componentDidUpdate(prevProps) {
    this.fetchHotList(this.props.platform);
  }

  fetchHotList(platform) {
    this.setState({
      loading: true,
    });
    fetch(`/api/hot_list/${platform}`, {
      credentials: 'include',
    }).then(res => res.json())
      .then(json => {
        if (json.status === 'ok') {
          this.setState({
            loading: false,
            songs: json.data.songs,
          });
        }
      })
      .catch(err => console.error(err));
  }

  render() {
    const { songs } = this.state;
    return (
      <div>
        {
          this.state.loading ?
            <Icon type="loading" /> :
            <SongList songs={songs}
            />
        }
      </div>
    );
  }
}

export default HotList;