reactjs 服务和表示组件拆分

Question

我正在向 reactjs 迈出第一步。我使用 fetch 创建了the movie db API 的服务。我已经完成了列出电影的名称。

我想要做的是拥有一个完全独立的组件。一个连接到 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>
    );
  }
}

我有一个带有此代码的父组件：

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


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

export default List;

我应该为此使用 redux 吗？

Answer 1

最好的办法是制作一个 MovieList 组件，从您的 ListingService 中您可以将电影的道具传递给它。

<MovieList movies={this.state.movieName}

与其将 ajax 调用中的电影名称保存为 jsx，不如将它们保存为数组中的字符串。

在您的 MovieList 组件中，通过电影数组映射

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

这是一个基本的实现，但您可以扩展它以创建电影对象列表，这样您就可以保存 id 并使键更具体。