Axios応答からのデータでmap（）を使用する方法？

Question

私はaxiosを使用してサーバーからデータを取得し、それを状態に格納しています。 state.map( post => {console.log(post)} )を実行しても、何も表示されません。

Express、Mongoose、NextJSおよびAxiosを使用しています。

私はaxiosを使用してサーバーからデータを取得し、_this.state.posts_に保存しています。 componentDidMountでconsole.log(this.state.posts)を実行すると、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} />
    })  
  })
}
_

Answer 1

次のようにレンダリングメソッドを変更します。

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

コードは状態の投稿を正しく参照していません。また、この方法では、投稿に対する操作は状態オブジェクトに直接影響しません。お役に立てれば！

Answer 2

async componentDidMount(){

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