reactjsサービスとプレゼンテーションコンポーネントを分割しました

Question

私はreactjsに私の最初のステップを与えています。フェッチを使用してthe movie db APIへのサービスを作成しました。私はすでに映画の名前を列挙しています。私がやろうとしています何

はcompletlyの独立したコンポーネントを持っています。 APIに接続する1つのコンポーネントと他のコンポーネントが、その情報を提示する責任があります。

今私は、同じコンポーネントにこの行動の両方を持っているもの:(

誰も私を助けることができますか？

ここで私はこのコードの父親のコンポーネントを持っている私のコード

import React, { Component } from 'react'; 

const listUrl = 'https://api.themoviedb.org/4/list/5?api_key=a6ebd775daadc2ec23c371e873e20a02&page=1'; 

class ListingService extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

    componentDidMount() { 
    fetch(listUrl) 
     .then((response) => { 
     if (!response.ok) { 
      throw Error('Network request failed'); 
     } 
     return response; 
     }) 
     .then((response) => { 
     return response.json(); 
     }) 
     .then((response) => { 
     this.setState({ 
      movieName: response.results.map((movie) => { 
      return (
       <li key={movie.id}>{movie.title}</li> 
      ); 
      }), 
     }); 
     },() => { 
     this.setState({ 
      requestFailed: true, 
     }); 
     }); 
    } 

    render() { 
    if (this.state.requestFailed) return <p>Failed!</p>; 
    if (!this.state.movieName) return <p>Loading...</p>; 
    return (
     <div> 
     <h2><ol>{this.state.movieName}</ol></h2> 
     </div> 
    ); 
    } 
} 

です：

import React from 'react'; 
import ListingService from '../../services/listing/index'; 


const List =() => { 
    return (
    <div> 
     <b>List of movies</b> 
     <ListingService /> 
    </div> 
); 
}; 

export default List; 

これに還元剤を使用しますか？

Answer 1

MovieListコンポーネントを作成するのが最善のことです。あなたのMovieSourceからムービーの小道具を渡すことになります。

ajax呼び出しでムービー名をjsxとして保存するのではなく、単に文字列として配列に保存してください。あなたのMovieListコンポーネントで

、これは基本的な実装ですが、あなたはIDを保存し、キーを作ることができるので、映画のリストは、オブジェクトを作ってそれを拡大することができ、映画

const MovieList = props => (props.movies.map((movie,i) => (<ol><li key={i} >{movie.title}</li></ol>)) 

の配列スルーマップより具体的。