渲染前无法获取数据

Question

我尝试在渲染之前使用 axios 获取数据。我正在使用 axios 并在 ComponentDidMount 中获取数据。我也尝试进入 Component WillMount 但仍然无法解决这个问题我该如何解决？？？？

我也尝试进入 Component WillMount 但仍然无法正常工作，我需要渲染之前的数据，因为我必须传递给另一个组件。 之后我放了一个按钮，从加载的网站几秒钟后它按预期工作

componentDidMount() {
    axios
      .get(
        "https://us-central1-punjabi-music-downloader.cloudfunctions.net/getTracks"
      )
      .then(res => this.setState({ tracks: res.data }));
  }
  render() {
    return (
      <div>
        <h1>Music tracks</h1>
        {this.state.tracks[0].name}
      </div>
    );
  }

我收到.name is not defined。

Answer 1

你只需要检查数据是否可用然后你只需要像这样设置它

{this.state.tracks && this.state.tracks.length > 0 ? <span>this.state.tracks[0].name</span> : null}