javascript - 我应该使用 Prop 或状态来传递数据吗？

我正在从API提取一系列商品（看电影）。每部电影都有几个细节（标题，导演，演员，简介等）

这是我的结构图：



这是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>
    );

}

我的问题：


我应该使用状态还是道具将数据从Movielist传递到Movie
由于没有“ for”模板，我该如何做，所以我没有在Movie中创建列表，而是在Movie中循环了整个Movielist组件？


例如，我想在MovieList中实现以下功能：

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

最佳答案

render()之MovieList：

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

关于javascript - 我应该使用 Prop 或状态来传递数据吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40702034/