Javascript 使用Fetch-in-React呈现列表

尝试从随机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>
    )
}

componentDidMount（）{
var myRequest=新请求（网站）；
让电影=[]；
获取（myRequest）
.then（函数（响应）{return response.json（）；}）
.then（功能（数据）{
data.forEach（电影=>{
movies.push（movie.title）；
})
});
this.setState（{movies:movies}）；
}
render（）{
console.log（this.state.movies）；
log（this.state.movies.length）；
返回(
电影列表
)
}

如果我呈现这个，我只能打印我的状态，而不能访问里面的内容。 如何创建LIs列表并呈现UL？

---

谢谢你做了几件事

fetch

是异步的，所以在编写时，您实际上只是将电影设置为空数组。如果

data

是一个电影数组，您可以直接在您的状态中设置它，而不是先将它复制到一个新数组中。最后，在promise中为最终回调使用arrow函数将允许您使用

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

类MyComponent扩展了React.Component{ 构造函数（）{ 超级（） this.state={movies:[]} } componentDidMount（）{ var myRequest=新请求（网站）； 让电影=[]； 获取（myRequest） .then（response=>response.json（）） 。然后（数据=>{ this.setState（{movies:data}） }) } render（）{ 返回( 电影列表

{this.state.movies.map（movie=>{ return
• {movie.name}
})}

) } }

---

让您的电影处于状态您可以执行下一步来呈现电影列表：

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

render（）{
返回(
电影列表

{
this.state.movies.map（（movie）=>
电影
)
}

);
}

首先，由于fetch是异步的，您很可能在fetch调用完成之前调用

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

render（）{
const{movies}=this.state.movies；
返回(

{movies.length&&movies.map（m=>
{m.title}
）}

);
}

现在是否真的有可能复制？您甚至没有尝试使用

this.state.movies.map

呈现列表……非常感谢！