javascript - 关于我在星球大战应用程序中遇到的问题

Question

首先，早上好。 我正在做一个关于 React 的项目。我试图提取的数据的链接是 https://swapi.co/api/films/1/ 。

我的目标是在我的 MovieDetail 页面上列出电影数据。到目前为止没有问题，片名、上映日期、导演等字符串字符数据都可以打印屏幕。

但是，当我想打印属于电影的字符时，即使我在返回之前在 this.state.characters 中显示了序列，我也无法在屏幕上列出这些字符。
虽然我用自己的方式用不同的方法尝试了大约2-3天，但我没有成功。现在在代码中我只是想获取电影中的 Angular 色。

我对其他标题、出版日期等数据没有任何问题。我的项目的当前版本可在 https://github.com/kasim444/Javascript-Camp-2019/tree/master/challenges/star-wars-app 获取。 。真正的问题是我经历过的 MovieDetails.js 中的组件。如果你能帮助我，我将不胜感激。我不知道我错过了哪一点。

我尝试用钩子(Hook)来做。我只是尝试用 fetch 方法来做。

import React, {Component} from 'react';
import axios from "axios";

class MovieDetails extends Component {
  state = {
    director:null,
    episode_id:null,
    opening_crawl:null,
    producer:null,
    release_date:null,
    title:null,
    loading:true,
    characters:[],
  };
  async componentDidMount() {

    const movieId = this.props.match.params.id;
    let characterNames = [];

    const movieDetail = await  axios.get(`https://swapi.co/api/films/${movieId}/`);

    const charactersFetchLinks = movieDetail.data.characters.slice(0, 10);

    const promisesData = await charactersFetchLinks.map( link => axios.get(link) );
    axios.all(promisesData).then(value => value.map(val => {
      characterNames.push(val.data.name);
      // console.log(val.data.name);
    }));

    this.setState({characters: characterNames, loading:false});
    debugger;
  }



  renderLoading() {
    return <div>Loading...</div>;
  }
  render() {
    // console.log(this.state.characters);
      return (
        <div>
          Test
          {!this.state.loading &&  this.state.characters.map(characterName => characterName) }
        </div>
      );
    }
  }

  export default MovieDetails;

Answer 1

由于 axis.all 是异步操作，因此您需要在数据获取完成之前设置 this.setState({characters: characterNames, loading: false}) .

因此您可以将 this.setState 语句移至 then 内。 您可以跟随

请注意，我将 value.map(val => {) 更改为 value.forEach(val => {) 以使用 .forEach 而不是 .map，因为它不返回任何值(或用它做任何事情)。

class MovieDetails extends Component {
  state = {
   // omitted for brevity
  };
  async componentDidMount() {
    const movieId = this.props.match.params.id;
    let characterNames = [];
    const movieDetail = await axios.get(
      `https://swapi.co/api/films/${movieId}/`
    );
    const charactersFetchLinks = movieDetail.data.characters.slice(0, 10);
    const promisesData = await charactersFetchLinks.map(link =>
      axios.get(link)
    );
    axios.all(promisesData).then(value =>

      // I changed the `.map` to `.forEach` as you aren't returning anything.
      value.forEach(val => {
        characterNames.push(val.data.name);
        // console.log(val.data.name);
        this.setState({ characters: characterNames, loading: false });
      })
    );
    debugger;
  }

  renderLoading() {
    return <div>Loading...</div>;
  }
  render() {
    return (
      <ul>
        {!this.state.loading &&
          this.state.characters.map(characterName => (
            <li key={characterName}>{characterName}</li>
          ))}
      </ul>
    );
  }
}

您可以在下面看到工作屏幕。