Comment utiliser map () avec les données de la réponse axios?

Question

J'utilise axios pour obtenir des données du serveur et les stocker dans l'état. Quand je fais state.map( post => {console.log(post)} ), je ne vois rien.

J'utilise Express, Mongoose, NextJS et Axios.

J'utilise axios pour obtenir des données du serveur et les stocker dans this.state.posts. Quand je fais console.log(this.state.posts) dans componentDidMount, il enregistre parfaitement le tableau des messages. Mais quand je fais la même chose dans render(){ return ( /*here*/)} cela ne montre rien.

Cela enregistre tous les messages sans erreur

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

Mais cela n'enregistre rien -

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

Answer 1

Modifiez votre méthode de rendu comme ceci:

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

Votre code ne fait pas correctement référence aux publications en état. De plus, de cette façon, toute opération sur les publications n'affectera pas directement l'objet d'état. J'espère que cela t'aides!

Answer 2

async componentDidMount(){

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