在 React 中使用 Fetch 渲染列表

Question

尝试从随机 API 渲染电影列表并最终过滤它们。

 componentDidMount() {
    var myRequest = new Request(website);
    let movies = [];

    fetch(myRequest)
        .then(function(response) { return response.json(); })
        .then(function(data) {
            data.forEach(movie =>{
                movies.push(movie.title);
            })
        });
     this.setState({movies: movies});
}

render() {
    console.log(this.state.movies);
    console.log(this.state.movies.length);
    return (
        <h1>Movie List</h1>
    )
}

如果我渲染它，我只能打印我的状态而不能访问里面的内容。我将如何创建 LI 列表并呈现 UL？谢谢

原文由 Julianv46 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一些东西。 fetch 是异步的，所以你基本上只是将 movies 设置为一个空数组，因为这是写的。如果 data 是一个电影数组，您可以直接在您的状态中设置它，而不是先将其复制到一个新数组。最后，在 promise 中为最终回调使用箭头函数将允许您使用 this.setState 而无需显式绑定该函数。

最后，您可以使用 JSX 花括号语法映射状态对象中的电影，并将它们呈现为列表中的项目。

 class MyComponent extends React.Component {
  constructor() {
    super()
    this.state = { movies: [] }
  }

  componentDidMount() {
    var myRequest = new Request(website);
    let movies = [];

    fetch(myRequest)
      .then(response => response.json())
      .then(data => {
        this.setState({ movies: data })
      })
  }

  render() {
    return (
      <div>
        <h1>Movie List</h1>
        <ul>
          {this.state.movies.map(movie => {
            return <li key={`movie-${movie.id}`}>{movie.name}</li>
          })}
        </ul>
      </div>
    )
  }
}

原文由 djfdev 发布，翻译遵循 CC BY-SA 3.0 许可协议