reactjs - API 请求返回页面标记

Question

我已经问过这个问题了[LINK]，因为我没有得到任何答案，所以我重新问了一遍，我希望这不违反规则。

问题是当我触发请求时，我得到的结果是一个页面标记，但是如果我重新触发，那么一切都解决了。

问题似乎仅在我触发请求时才出现，因为在加载页面时执行请求时没有问题。

我正在使用 redux 和 redux-thunk 作为中间件。

这是我得到的响应的图像

这些是组件的代码：

行动

import { BEGIN_FETCH_MOVIES, FETCHED_MOVIES, FETCH_FAILED_MOVIES } from '../constants';
import axios from 'axios';


//fetch movie
const searchQuery = (url) => {
  return dispatch => {
    //dispatch begin fetching
    dispatch({
      type : BEGIN_FETCH_MOVIES,
    })

    //make a get request to get the movies 
    axios.get(url)
      .then((res) => {
        //dispatch data if fetched 
        dispatch({type : FETCHED_MOVIES, payload : res.data});
      })
      .catch((err) => {
        //dispatch error if error
        dispatch({type : FETCH_FAILED_MOVIES});
    });
  }
  //return the result after the request
}

export default searchQuery;

主要成分

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionSearchMovie, actionSearchSerie } from '../actions'
import DisplayItemMovie from '../components/DisplayItemMovie';
import DisplayItemSerie from '../components/DisplayItemSerie'; 
import DrPagination from "../components/DrPagination";
import { Layout, Divider, Icon, Spin, Row } from 'antd';


//Home component 
class Home extends Component {
  constructor(){
    super();

    this.state = {
      moviePage : 1,
      seriePage : 1,
      urlMovie : '',
      urlSerie : ''
    }
  }

  //make request before the render method is invoked
  componentWillMount(){
    //url
    const discoverUrlMovies = 'https://api.themoviedb.org/3/discover/movie?api_key=72049b7019c79f226fad8eec6e1ee889&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1';

    //requests 
    this.fetchMovie(discoverUrlMovies);
  }

  fetchMovie = ( url ) => {
    this.props.actionSearchMovie(url);
  }



  //handle pagination 

  handleChangePage = (page) =>{
    let url = 'https://api.themoviedb.org/3/discover/movie?api_key=72049b7019c79f226fad8eec6e1ee889&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=' + page;

    this.setState({
      moviePage : page,
      urlMovie : url
    }, ()=> this.state);

    this.fetchMovie(this.state.urlMovie);
  }


  //render
  render() {
    const movies = this.props.movies.results;             //movies
    let displayMovies;           //display movies
    const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;          //spinner

    //if movies and series is undefined, display a spinner
    if(movies.results === undefined){
      displayMovies = <Spin indicator={antIcon} />
    }else {
      //map through movies and series and then display the items 
      displayMovies = movies.results.map((movie) => {
        return <DisplayItemMovie key = {movie.id} movie = {movie} />
      });
    }

    return (
      <div>
        <div className='header'>
          Home
        </div>
        <Divider />
        <Layout style = {{paddingBottom : '1rem', margin : '0 auto' }}>
          <h1 className = 'title'>Movie</h1>
          <Row type = 'flex' style = {{flexWrap : 'wrap'}}>
            {displayMovies}
          </Row>
          <DrPagination total = { movies.total_results } page = { this.handleChangePage } currentPage = { this.state.moviePage }  />          </div>
    )
  }
};

const mapStateToProps = (state) => {
  return{
    movies : state.search_movies,
  }
}

export default connect(mapStateToProps, { actionSearchMovie })(Home);

我不包括减速器的代码，但如果需要，我会发布它。

标签： reactjsapiredux