5
votes

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

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 . Lorsque 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

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

Mais cela n'enregistre rien -

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

javascript reactjs node.js object axios

1 commentaires

Essayez d'encapsuler votre code jsx avec <React.Fragment>

6 Réponses :

0
votes

async componentDidMount(){

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

1 commentaires

Pour une meilleure réponse, essayez d'ajouter des explications à votre code.

3
votes

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

1 commentaires

Merci beaucoup!!! Ce seul mot me hantait depuis toute la journée. Mais uniquement pour corriger cette erreur, j'ai appris beaucoup de choses aujourd'hui!

1
votes

Pouvez-vous essayer ceci:

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

1 commentaires

Je l'ai déjà essayé en pensant que c'est un problème avec les rappels! mais le problème est résolu maintenant et c'était une erreur stupide de ne pas retourner le <Post /> dans map ()

1
votes

Vous devez renvoyer posts.map sans ouverture {}

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

const { posts = [] } s'assurera que les posts sont un tableau et ne vous donneront aucune erreur comme cannot read .map of undefined

Ou vous pouvez ouvrir {} dans un React.Fragment

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

0 commentaires

2
votes

Vous pouvez fournir un rappel à la méthode setState qui s'exécutera après la mise à jour de l'état. Vous pouvez utiliser

this.setState({posts: data, isLoading: false}, () => console.log(this.state.posts))

pour enregistrer l'état mis à jour.

Et dans la méthode de rendu, vous devez utiliser

 render() {
  const { posts} = this.state;
   return(
      <React.Fragment>
       posts.map( (post,i) => (
        <Post title={post.title} key={i} />
       ))  
     </React.Fragment>
   )
 }

render() {
  return(
    this.state.posts.map( (post,i) => (
      <Post title={post.title} key={i} />
    ))  
  )
}

0 commentaires

1
votes

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!

0 commentaires