我应该使用道具或状态来传递数据吗？

Question

我正在从 API 获取一组项目（call'em 电影）。每部电影都有几个细节（标题、导演、演员、概要等）

这是我的结构图：

这是 MoviesList 组件：

 constructor(props) {
    super(props);

    this.state = {
      movies: []
    };
  }

  componentDidMount() {
    fetch('http://localhost:3335/movies')
      .then(function(response) {
        return response.json()
      }).then((movies) => {
        this.setState({ movies });
      }).catch(function(ex) {
        console.log('parsing failed', ex)
      })
  }

  render() {
    return (
      <div className="movies">
        <Movie movies={this.state.movies}></Movie>
      </div>
    );
  }

这是电影：

render() {

    const movielist = this.props.movies.map((movie) =>
        <li>{movie.title}</li>
    );

    return (
      <ul className="movie">
        { movielist }
      </ul>
    );

}

我的问题：

1. 我应该使用 state 还是 props 将数据从 Movielist 传递到 Movie
2. 由于没有“for”模板，我该如何制作，所以我不会在 Movie 内创建列表，而是在 Movielist 内循环整个 Movie 组件？

比如我想在MovieList里面实现如下：

  render() {
    return (
      <div className="movies">
        <Movie for movie in movies></Movie>
      </div>
    );
  }

Answer 1

MovieList 中的render() ：

  render() {
    return (
      <div className="movies">
        {
          this.state.movies
          ? <ul>
              {this.state.movies.map((movie, index) => <Movie title={movie.title} key={index}/>)}
            </ul>
          : null
        }
      </div>
    );
  }

---

render() 的Movie ：

  render() {
    return (
      <li className="movie">{this.props.title}</li>
    );
  }

Answer 2

i props/state - 我认为你所做的很好；将外部组件 (MoviesList) 的状态作为道具传递给其子组件（您不会使用 api 调用的结果设置外部组件自己的属性）。

ii 您可以在外部组件中映射电影，例如：

    renderMovie(movie) {
        return (
          <Movie movie={movie} /> 
        ); 
    }

    render() 
    { 
      return ( 
        <div className="movies">
          <ul>
            { this.state.movies.map(this.renderMovie) } 
          </ul>
        </div>
      ); 
    }