使用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？谢谢

Answer 1

一些东西.fetch是异步的,所以你基本上只是将电影设置为空数组,因为这是写的.如果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>
    )
  }
}