如何将 map() 与来自 axios 响应的数据一起使用？

Question

我正在使用 axios 从服务器获取数据并将其存储在状态中。当我执行 state.map( post => {console.log(post)} ) 时，我什么也没看到。

我正在使用 Mongoose Express ， NextJS Axios

我正在使用 axios 从服务器获取数据并将其存储在 this.state.posts 中。当我在 console.log(this.state.posts) 中执行 componentDidMount 时，它会完美地记录帖子数组。但是当我在 render(){ return ( /*here*/)} 中做同样的事情时，它没有显示任何内容。

这会记录所有帖子而不会出错

async componentDidMount() {
        const { data } = await axios.get('/api/all')
        this.setState({posts: data, isLoading: false})
        console.log(this.state.posts)
    }

但这不会记录任何内容 -

 render() {
  return({
    posts.map( post => {
      <Post title={post.title} />
    })
  })
}

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

Answer 1

{
   posts.map( post => {
    return <Post title={post.title} />
})
}

也许它有效。

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

Answer 2

您可以向 setState 方法提供回调，该方法将在状态更新后运行。您可以使用

this.setState({posts: data, isLoading: false}, () => console.log(this.state.posts))

记录更新状态。

在渲染方法中你应该使用

render() {
  return(
    this.state.posts.map( (post,i) => (
      <Post title={post.title} key={i} />
    ))
  )
}

或者

 render() {
  const { posts} = this.state;
   return(
      <React.Fragment>
       posts.map( (post,i) => (
        <Post title={post.title} key={i} />
       ))
     </React.Fragment>
   )
 }

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