web-dev-qa-db-fra.com

React ne peut pas lire la carte des propriétés d'undefined

Je suis très nouveau pour réagir et j'essaie d'importer des données à partir d'une API Rails mais j'obtiens l'erreur TypeError: Cannot read property 'map' of undefined

Si j'utilise les outils de développement React, je peux voir l'état et je peux voir les contacts si je m'amuse avec lui dans la console en utilisant $r.state.contacts Quelqu'un peut-il m'aider avec ce que j'ai fait de mal? mon composant ressemble à ceci:

import React from 'react';
import Contact from './Contact';

class ContactsList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    return fetch('http://localhost:3000/contacts')
      .then(response => response.json())
      .then(response => {
        this.setState({
          contacts: response.contacts
        })
      })
      .catch(error => {
        console.error(error)
      })
  }

  render(){
    return(
     <ul>
        {this.state.contacts.map(contact => { return <Contact contact{contact} />})}
      </ul>
    )
  }
}

export default ContactsList;
javascriptreactjsecmascript-6fetch-api
10
Ollie2619

Impossible de lire la propriété 'map' d'undefined, pourquoi?

Parce que this.state Est initialement {}, Et contacts de {} Sera indéfini . Le point important est que componentDidMount sera appelé après le rendu initial et lance cette erreur lors du premier rendu.

Solutions possibles:

1- Soit définir la valeur initiale de contacts comme [] Dans l'état:

constructor(props) {
  super(props)
    this.state = {
       contacts: []
    }
}

2- Ou mettez le chèque avant d'utiliser map dessus:

{this.state.contacts && this.state.contacts.map(....)

Pour vérifier le tableau, vous pouvez également utiliser Array.isArray(this.state.contacts).

Remarque: Vous devez attribuer une clé unique à chaque élément à l'intérieur de la carte, vérifiez le DOC .

17
Mayank Shukla