遍历Fetch_API似乎对我不起作用

Question

我已经从API提取了数据，并试图遍历从URL接收到的json数据，但是我遇到了错误，它说'posts.map不是一个函数。我已通过互联网查看，但未收到我想要的答案。感谢您的帮助！

这是我的reactjs代码：

class App extends React.Component {

  state = {
    isLoading: true,
    posts: [],
    error: null,
    users: []
  }

 async componentDidMount(){
    const URL_API = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json`;
    const response = await fetch(URL_API);
    const data = await response.json(); //this is asyncronous calls that 
    return us the json data
    this.setState({
      posts: data,
      isLoading: false,
    })
  }

  render() {
    const { posts } = this.state
    console.log('posttt', posts);

    return (
     <React.Fragment>
        <h1>React fetch - Blog</h1>
          <hr />

        <ul id='list'>
         {posts.map(post => (
           <li 
              key={post.id}>
             <span>{post.title}</span>
             <span>{post.content}</span>
           </li>

         ))}
        </ul>

     </React.Fragment>

    );
  }  
}

export default App;

] 1

Answer 1

从API返回的数据似乎是带有posts键的对象。
因此，可以通过data.posts设置状态，也可以在posts.posts上循环。

我认为第一种选择似乎更合理。

this.setState({
      posts: data.posts,
      isLoading: false,
    })