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

Answer 2

首先，由于提取是异步的，因此您很可能在提取调用完成之前调用setState，而您显然不想这样做。

其次，如果返回的数据是电影数组，请不要迭代它，只需将数组完全分配给movies状态变量。

因此，简而言之，这就是您的componentDidMount方法应该是这样的：

componentDidMount() {
  var myRequest = new Request(website);

  fetch(myRequest)
    .then(res => res.json())
    .then(movies =>
      this.setState({ movies }); // little bit of ES6 assignment magic 
    );
}

然后在渲染功能中，您可以执行以下操作：

render() {
  const { movies } = this.state.movies;
  return (
    <ul>
      {movies.length && movies.map(m => <li key={m.title}>{m.title}</li>)}
    </ul>
  );
}

Answer 3

让你的电影处于状态，你可以做下一个渲染电影列表：

render() { return ( <h1>Movie List</h1> <ul> {this.state.movies.map(movie) => ( <li key={movie}>movie</li> )} </ul> ) }

使用React中的Fetch呈现列表

3 个答案: