Question

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

我正在使用Express，Mongoose，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} />
    })  
  })
}

Answer 1

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

也许可行。

Answer 2

您可以尝试以下方法吗：

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

Answer 3

您需要返回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} />
        )
      }
    </>    
  )
}

Answer 4

您可以提供对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>
   )
 }

Answer 5

像这样修改渲染方法：

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

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

Answer 6

async componentDidMount(){

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

如何对来自axios响应的数据使用map（）？

6 个答案: