javascript - 我应该使用 props 还是 state 来传递数据？

Question

我正在从 API 获取一组项目(称为电影)。每部电影都有几个细节(标题、导演、 Actor 、剧情简介等)

这是我的结构图:

这是 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 中创建列表？但我正在循环整个 Movie内部组件 Movielist ？

例如，我想在 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():

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