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;

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

2 个答案: