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

【问题标题】：How to use map() with data from axios response?如何将 map() 与来自 axios 响应的数据一起使用？
【发布时间】：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 代码

标签： javascript node.js reactjs object axios

【解决方案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
  })
}

【讨论】：

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