Endless Axios Request

Question

moviedb apiでムービーの配列を取得したいと思います。 apiパラメータに基づいて、apiオブジェクトにはわずか10〜12の要素しかないので、返信するムービーデータをログに記録すると、アプリケーションがロードされるとすぐに多くの要素を持つオブジェクトが表示されます。しかし、代わりに、アプリケーションは無限の要求を作成し、空のオブジェクトを連結しているように見える。 renderMovies（）メソッドの呼び出しを1回だけ行ったにもかかわらず、一度だけ要求しているのはなぜですか？

movie_list.js（コンテナ）

class MovieList extends Component { 

    renderMovies() { 
     this.props.fetchMovies() 
     console.log(this.props.movies) 
     //console.log('hitting multiple times') 
    } 

    render() { 
     this.renderMovies() 

     return (
      <div>Hello</div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     'movies': state.fetchMovies 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 'fetchMovies': fetchMovies }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(MovieList); 

アクションクリエーター

import { FETCH_MOVIES } from '../actions/index'; 

export default function(state = [], action) { 

    switch (action.type) { 
     case FETCH_MOVIES: 
      return state.concat([action.payload.data]) 
    } 

    return state; 
} 

リデューサーインデックス

import { combineReducers } from 'redux'; 
import MovieReducer from './movie_reducer'; 

const rootReducer = combineReducers({ 
    'fetchMovies': MovieReducer 
}); 

export default rootReducer; 

減速

import axios from 'axios'; 

export const FETCH_MOVIES = 'FETCH_MOVIES'; 

const API_KEY = '2458c1d252003392f870911dc14151e7'; 
const ROOT_API = `https://api.themoviedb.org/3/movie/now_playing?api_key=${API_KEY}`; 

export function fetchMovies(){ 

    const url = `${ROOT_API}&page=1` 
    const request = axios.get(url) 

    return { 
     'type': FETCH_MOVIES, 
     'payload': request 
    }; 
} 

は、ここでは、レンダリング関数内のデータをフェッチしているコンソール出力のサンプル

Answer 1

です。 Renderは、小道具が変更されるたびに呼び出されるので、あなたのアプリは初期レンダリングを行い、状態を変更するムービーを取得し、レンダリングを引き起こします。これを防ぐために、フェッチをcomponentDidMountライフサイクルメソッド内に置きます。

class MovieList extends Component { 
    componentDidMount() { 
     this.props.fetchMovies() 
    } 
    renderMovies() { 
     console.log(this.props.movies) 
     //console.log('hitting multiple times') 
    } 

    render() { 
     this.renderMovies() 

     return (
      <div>Hello</div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     'movies': state.fetchMovies 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 'fetchMovies': fetchMovies }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(MovieList);