javascript - 在 react 中动画(获取数据)之后不是组件渲染

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。