渲染前无法获取数据

Question

我尝试在渲染axios之前获取数据。我正在使用axios，并在ComponentDidMount中获取数据。我还尝试获取组件WillMount，但仍无法正常工作，如何解决此问题？？

我也试图进入组件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}