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

Posted 2023-02-22

【中文标题】如何将 map() 与来自 axios 响应的数据一起使用？

【英文标题】：How to use map() with data from axios response?

【发布时间】：2019-10-25 19:42:35

【问题描述】：

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

我正在使用Express、Mongoose、NextJS 和 Axios。

我正在使用axios 从服务器获取数据并将其存储在this.state.posts 中。当我在componentDidMount 中执行console.log(this.state.posts) 时，它会完美地记录帖子数组。但是当我在 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 />
    )  
  )

【问题讨论】：

尝试用

包装你的 jsx 代码

【参考方案1】：

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

也许可行。

【讨论】：

非常感谢！！！这个词一直困扰着我一整天。不过只是为了修复这个错误，今天学到了很多东西！

【参考方案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>
   )
 

【参考方案3】：

你可以试试这个：

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

【讨论】：

我已经尝试过了，认为这是回调的问题！但是问题现在已经解决了，这是一个愚蠢的错误，我没有在 map() 中返回

【参考方案4】：

你需要直接返回posts.map而不打开

render() 
  const  posts = []  = this.state
  return(
    posts.map( post => 
      <Post title=post.title />
    )  
  )

const posts = [] 将确保 posts 是一个数组，并且不会给您任何错误，例如 cannot read .map of undefined

或者您可以在React.Fragment 中打开

render() 
  const  posts = []  = this.state
  return(
    <>
       
        posts.map( post => 
          <Post title=post.title />
        )
      
    </>    
  )

【参考方案5】：

像这样修改你的渲染方法：

render() 
  let Posts = ...this.state.posts;
  return(
    Posts.map( post => <Post title=post.title />);  
  )

您的代码未正确引用状态中的帖子。此外，这样对帖子的任何操作都不会直接影响状态对象。 希望这会有所帮助！

【参考方案6】：

async componentDidMount()

const res = await axios.get('/api/all')
  this.setState(
  post: res.data
  )

【讨论】：

为了获得更好的答案，请尝试在您的代码中添加一些解释。