在反应中动画（获取数据）之后不进行组件渲染

Question

我正在从事星球大战项目。我在捕获数据时添加了一个动画。但是一旦你拉取数据，组件就不会再次呈现。连续动画保持活动状态。我错过了什么？提前谢谢各位，大家晚上好

注：此 github 项目 link : 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

加载始终为真，因为状态始终已定义。

Answer 2

你可以替换

const loading = this.state;

作者：

 const loading = this.state.loading;

在反应中动画（获取数据）之后不进行组件渲染

not component rendering after animation ( fetch data ) in react

javascript

loading

fetch

reactjs