0
votes

Pourquoi est-ce que j'obtiens l'erreur "TypeError: this.state.users.map is not a function"

J'obtiens une erreur qui dit "TypeError: this.state.users.map n'est pas une fonction" cependant il y a une variable de liste dans mon état qui est liée donc je ne sais pas pourquoi la fonction de carte ne fonctionne pas.

      getList(){
        console.log("FUNCTION CALLED");
        axios.get("/api/mentorRequests")
        .then((result) => {
          console.log("Logging results", result);
          this.setState({users: result});
        })
      }
      render() {
        console.log("USERS", this.state.users);
        return (
          <div className="">
               {this.state.users.map((user) => 
                <div>
                  {user.displayName}
                </div>
              )}
          </div>
        );
      }

reactjs axios

1 commentaires

Veuillez fournir plus d'informations. map () est une méthode de tableau, donc le problème possible est que l'état de vos utilisateurs n'est pas un tableau. essayez d'initialiser l'état des utilisateurs avec un tableau vide et vérifiez que le résultat que vous obtenez de getList () est un tableau.

4 Réponses :

1
votes

Vous devriez vérifier et voir si la réponse que vous obtenez est un tableau car .map est une fonction de tableau que vous ne pouvez pas utiliser sur autre chose, donc il vous donnera TypeError car le type de l'objet que vous essayez d'utiliser .map n'est pas correct.

0 commentaires

2
votes

Vous pourriez oublier d'initialiser state.users avec un tableau vide.

this.state = {
  users: []
}

0 commentaires

2
votes

Essayez de faire ce qui suit:

getList() {
   console.log("FUNCTION CALLED");
   axios.get("/api/mentorRequests")
   .then((result) => {
      console.log("Logging results", result);
      this.setState({users: result});
   })
}
render() {
   console.log("USERS", this.state.users);
   return (
     <div className="">
        {this.state.users && this.state.users.map((user) => 
            <div>
               {user.displayName}
            </div>
        )}
     </div>
   );
}

0 commentaires

0
votes

Ma fonction getList () retournait un objet json et je définissais le tableau dans mon état sur l'objet json donc il y avait une incompatibilité de type. Merci à tous ceux qui ont aidé.

0 commentaires