反应后动画（获取数据）后没有组件渲染

Question

我正在做一个星球大战项目。 捕获数据时添加了动画。 但是，一旦提取数据，该组件将不会再次呈现。 连续动画保持活动状态。 我想念什么？ 提前谢谢大家，晚上好。

注意：此github项目链接为： https : //github.com/kasim444/Javascript-Camp-2019/tree/master/challenges/star-wars-app 。

最后，如果有我的发展，我愿意接受您的建议。

class MovieDetails extends Component {
  state = {
    title:null,
    episode_id:null,
    opening_crawl:null,
    director:null,
    producer:null,
    release_date:null,
    characters:[],
    loading:true,
  };
  async componentDidMount() {
    const titleSearch = this.props.match.params.title;
    let characterNames = [];
    const movieDetail = await  axios.get(`https://swapi.co/api/films/?search=${encodeURI(titleSearch)}`);
    const charactersFetchLinks = movieDetail.data.results[0].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) );
      const {title, episode_id, opening_crawl, director, producer, release_date} = movieDetail.data.results[0];
      this.setState({ title, episode_id, opening_crawl, director, producer, release_date, characters: characterNames, loading: false });
    });
  }

  render() {
    const movieId = this.state.episode_id;
    const loading = this.state;
     return (
        loading ?
        <Loading /> :
        <div>
          <main className="movieBg">
            <DetailHeader imgLink={moviesImageLinks[movieId-1]} />
            <MovieContent imgLink={moviesImageLinks[movieId-1]} movieInfo={this.state} />
          </main>
          <FeaturedMovies />
        </div>
       );
    }
  }
  export default MovieDetails;

Answer 1

您没有正确地分解属性。

 const movieId = this.state.episode_id;
 const loading = this.state;

应该：

 const { episode_id, loading } = this.state

由于状态始终是定义的，因此加载将始终为true。

Answer 2

您可以更换

const loading = this.state;

通过：

 const loading = this.state.loading;