1
votes

"État" non défini lors de la tentative de mappage des données Json récupérées dans l'application React

Je récupère des données à partir d'une API wordpress. Je vois le tableau de données lorsque je me connecte à la console. En mappant les données, j'obtiens une erreur disant "# myStateName.map n'est pas une fonction".

Je suis allé sur ReactJS.org, CSS Tricks et même Stack overflow pour trouver des solutions mais rien ne semble fonctionner p >

class WPHome extends Component {

  constructor(props) {
super(props);
this.state = {
  error: null,
  isLoaded: false,
  details: []
};
  }

  componentDidMount() {
fetch(API_URL)
  .then(res => res.json())
  .then(
    (result) => {
      console.log(result['0'])
      this.setState({
        isLoaded: true,
        details: [result]
      });
    },
    // Note: it's important to handle errors here
    // instead of a catch() block so that we don't swallow
    // exceptions from actual bugs in components.
    (error) => {
      this.setState({
        isLoaded: true,
        error
      });
    }

  )
}

render() {
const { error, isLoaded, details } = this.state;
if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <div>Loading...</div>;
} else {
  return (
    <div>
      {details.map(item => (
        <div key={item.id}>
          <p>{item.id}</p>
          <div>
            <img src={item._embedded['wp:featuredmedia']['0'].source_url} alt={item.id} />
          </div>
          <p>{item.content}</p>
          <hr />
        </div>
      ))}
    </div>
  );
}
  }

Je m'attends à ce que mes données passent dans le bloc HTML mais je reçois un erreur .

javascript reactjs api

15 commentaires

pouvez-vous partager la réponse de l'API

Objet {id: 2, date: "2019-08-05T11: 51: 22", date_gmt: "2019-08-05T11: 51: 22", guid: {…}, modifié: "2019-08- 05T12: 51: 42 ", modified_gmt:" 2019-08-05T12: 51: 42 ", slug:" home ", statut:" publier ", tapez:" page ",…} WPHome.jsx: 21

le résultat de la réponse que vous obtenez est un tableau ou un objet, veuillez console.log (type de résultat)

pouvez-vous joindre une capture d'écran de la console de votre navigateur par console.table (résultat)

Il dit "Objet" console.log (type de résultat)

Vous ne pouvez pas utiliser .map sur un objet. Il ne peut être utilisé que sur des tableaux.

lien

utilisez Object.keys () ou des entrées si vous effectuez une itération sur un objet

Pouvez-vous illustrer comment? ou éventuellement convertir l'objet en tableau? @TapanDave

Il ne montre aucune donnée. Ainsi,

{item.id}

affiche un

vide

Vous demandez un seul article ou une collection (liste d'articles)? Montrez l ' API_URL s'il vous plaît. Essayez de définir: details: Object.values (result) si vous demandez une liste de messages et que votre réponse est un objet.

/ wp-json / wp / v2 / pages? _embed & filter [orderby] = date & order = asc Je souhaite utiliser les données d'un article particulier et non une liste d'articles.

@EdwardBella j'ai partager un violon s'il vous plaît se référer à la réponse ci-dessous

Vous devez donc définir details sur result et l'utiliser dans render () sans .map , juste details.id , details.content etc.

@pako L'utiliser sans mappage n'affiche toujours aucune donnée. Capture d'écran

8 Réponses :

0
votes

Dans votre déclaration d'état dans le constructeur, ajoutez le

  this.setState({
    isLoaded: true,
    details: result
  });

L'erreur peut être due au fait que this.state.details n'est pas défini au début.

I J'ai également remarqué que lors de votre demande de récupération, vous faites ce qui suit.

  this.setState({
    isLoaded: true,
    details: result['0']
  });

Puisque le résultat est un tableau, il ne devrait pas être défini sur l'état des détails comme suit. >

 this.state = {
  details:[],
  error: null,
  isLoaded: false,
  result: []
 }

2 commentaires

Oui. Mon API renvoie 2 ensembles de données de tableau mais je veux plonger dans le premier d'où le "['0']". J'ai également défini l'état des détails mais l'erreur «details.map n'est pas une fonction» est toujours lancée.

À la ligne details: [result] , vous devez toujours utiliser soit l'opérateur de diffusion [... result] , soit simplement le premier élément [result [ 0]] , sinon vous obtiendrez un tableau imbriqué

1
votes

Vous n'initialisez pas les détails dans votre état. Ajoutez-le ici:

this.state = {
  error: null,
  isLoaded: false,
  result: [],
  details: [] // <- missing initialization
};

3 commentaires

Essayez donc de commenter le code dans componentDidMount () et vérifiez si l'erreur se produira. Si ce n'est pas le cas, le problème est à l'intérieur du résultat ['0'] - essayez de vérifier si vous définissez une bonne clé de cette réponse. Vous pouvez également ajouter console.log (typeof details, details) à l'intérieur de votre rendu pour afficher le type de données que vous avez là.

En commentant, l'erreur disparaît. Si je console.log (result ['0]) , je vois toutes les données contenues dans cet ensemble. Donc je ne suis pas sûr que ce soit le problème, n'est-ce pas?

il dit non défini pour console.log (type de détails)

0
votes

Il semble que vous n’avez pas déclaré la variable details dans votre état.

0 commentaires

-1
votes

Vous devez définir les détails dans le constructeur avec la valeur par défaut au lieu de result

constructor(props) {
    super(props);
    this.state = {
        error: null,
        isLoaded: false,
        details: [] // define missing
    };
}

0 commentaires

0
votes

Pouvez-vous simplement essayer d'exécuter:

render (
   <div>
          {
            details.map(item => (
             <div key={item.id}>
              <p>{item.status}</p>
             </div>
         }
   </div>
);

Et publier comment cela se passe?

3 commentaires

Ça ne marche pas. il ne reconnaît pas les «détails».

this.state.details

La fonction .map n'est disponible que sur un tableau. Il semble que le résultat ne soit pas dans le format que vous attendez (c'est {} mais vous attendez []). Ou, vous pouvez utiliser quelque chose comme ceci: details = Array.from (props.data); ou similaire ... Essayez ceci et faites-moi savoir si cela fonctionne.

0
votes

veuillez utiliser l'instruction setState ci-dessous car votre résultat est un objet

this.setState({ isLoaded: true, details: [result] });

1 commentaires

Il ne voit aucune donnée de l'état. Si je mappe

{item.id}

, il affiche un

vide sur le rendu.

0
votes

pour parcourir l'objet, veuillez vous référer au lien ci-dessous - https://jsfiddle.net/oek6um0h/1/

{Object.keys(details).length && Object.keys(details).map((item,k) => {
return <any></any>
}) || <p>nothing found</p>}

map est pour le tableau et non pour que l'objet utilise map, nous devons utiliser Object.keys () , méthode qui retourne un tableau du propre objet d'un objet donné noms de propriétés énumérables, dans le même ordre que nous obtenons avec une boucle normale

1 commentaires

Le violon n'affiche aucun résultat.

0
votes

J'ai enfin compris. J'ai dû utiliser Axios mais cela a fonctionné.

  constructor(props) {
super(props);
this.state = {
  error: null,
  isLoaded: false,
  details: []
};
}

componentDidMount(){
axios
  .get(API_URL)
  .then(response => response.data.map(detail => ({
    image: `${detail._embedded['wp:featuredmedia']['0'].source_url}`,
      content: `${detail.content.rendered}`,
      id: `${detail.id}`
    }))
  )
  .then(details => {
    this.setState({
      details,
      isLoading: false
    });
  })
  .catch(error => this.setState({ error, isLoading: false }));
}


render() {
const { isLoading, details } = this.state;

return (
  <React.Fragment>
      {!isLoading ? (
        details.map(detail => {
          const { id, content, image } = detail;
          return (
            <div key={id}>
              <p>{content}</p>
              <div>
                <img src={image} alt={id} />
              </div>
              <p>{content}</p>
              <hr />
            </div>
          );
        })
      ) : (
          <p>Loading</p>
      )
      }
  </React.Fragment>
)
  }

0 commentaires