reactjs 서비스 및 프레젠테이션 구성 요소가 분할 됨

Question

나는 reactjs에 첫발을 내딛고 있습니다. 가져 오기를 사용하여 the movie db API에 대한 서비스를 만들었습니다. 나는 이미 영화의 이름을 열거하고있다.

내가하려는 것은 completly independent 구성 요소를 가지고 있습니다. 한 구성 요소는 API 및 다른 구성 요소에 연결하여 해당 정보를 제공해야합니다. 지금 내가 같은 구성 요소 :(이 행동을 모두 가지고있는

는

은 누구도 날 도와 드릴까요?

다음은이 코드와 함께 아버지의 구성 요소가 내 코드

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> 
    ); 
    } 
} 

입니다 이 :

Answer 1

MovieList 구성 요소를 만드는 것이 가장 좋을 것입니다. ListService에서 영화의 소품을 전달할 수 있습니다.

<MovieList movies={this.state.movieName} 

오히려 jsx와 같은 Ajax 호출에 영화 이름을 저장하는 것보다, 그냥 배열에 문자열로 저장합니다. 당신의 MovieList 구성 요소에서

, 영화

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

이 기본 구현의 배열을 통해지도,하지만 당신은 그래서 당신이 ID를 저장할 수있는 객체 영화의 목록을 만들기 위해 그것을 확장 할 수와 키를 만들 좀더 구체적으로.