J'essaie d'utiliser la méthode map sur le tableau inclus dans les données JSON que j'ai obtenues de la méthode axios.get telle que 'console.log (data.results)'. lorsque j'essaie d'accéder aux données qui s'y trouvent, l'erreur suivante se produit:

TypeError: Cannot read property 'result' of undefined. 

Cependant, lorsque je mets 'console.log (data)', il enregistre les données json sans aucun problème. C'est le code que j'ai écrit et les données json dans l'objet de données.

componentDidMount() {
  axios.get('https://api.nytimes.com/svc/topstories/v2/science.json?api-key=privatekey')
      .then(result=>
            this.setState({jsonData:result})
           )
      .catch(error=> console.log(error))
  }
  
  render() {
    return(
      <div id="cards-wrapper">
       {console.log(this.state.jsonData.data)}
      </div>
    )
  }
<!-- console error-->

{status: "OK", copyright: "Copyright (c) 2019 Company. All Rights Reserved.", section: "science", last_updated: "2019-01-26T15:57:14-05:00", num_results: 28, …}
copyright: "Copyright (c) 2019 Company. All Rights Reserved."
last_updated: "2019-01-26T15:57:14-05:00"
num_results: 28
results: (28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
section: "science"
status: "OK"
__proto__: Object

Comment puis-je accéder au tableau «résultats» dans les données? Merci pour l'aide!

0
Jay 27 janv. 2019 à 00:11

3 réponses

Meilleure réponse

Vous devez vous assurer que vous vérifiez si jsonData.results.data a été défini, sinon cela générera une erreur car ces données ne sont pas disponibles depuis le début. N'oubliez pas que votre composant n'attend pas que la demande asynchrone soit satisfaite en premier, donc si vous essayez d'accéder à une propriété (dans ce scénario les données) à l'intérieur de l'état avant qu'il ne soit défini, alors il générera une erreur. Voici un exemple ci-dessous pour résoudre le problème:

class App extends React.Component {
  state = {
    jsonData: null,
  };

  componentDidMount() {
    axios
      .get(
        "https://api.nytimes.com/svc/topstories/v2/science.json?api-key=JoqkiXzZ0GoPgjxFrhHBA42XLzGwAYFq"
      )
      .then(result => this.setState({ jsonData: result }))
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div id="cards-wrapper">
        {this.state.jsonData && this.state.jsonData.data.results.map((article) => (
          <div key={article.short_url}>
            {article.title}
          </div>
        ))}
      </div>
    );
  }
}

Personnellement, je maintiendrais l'état le plus plat possible et je procéderais à la définition des données comme ci-dessous. C'est parce qu'il y a beaucoup de données inutiles que nous pouvons simplement éliminer comme les informations de copyright. À moins que vous n'utilisiez ces informations, nous n'avons pas besoin de les stocker dans l'état ainsi que les données réelles que nous devons utiliser.

class App extends React.Component {
  state = {
    jsonData: []
  };

  componentDidMount() {
    axios
      .get(
        "https://api.nytimes.com/svc/topstories/v2/science.json?api-key=JoqkiXzZ0GoPgjxFrhHBA42XLzGwAYFq"
      )
      .then(response => this.setState({ jsonData: response.data.results }))
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div id="cards-wrapper">
        {this.state.jsonData.map(article => (
          <div key={article.short_url}>{article.title}</div>
        ))}
      </div>
    );
  }
}

Ou si vous souhaitez conserver toutes les autres données de la réponse, vous pouvez utiliser un état loading qui contrôle si les données doivent être rendues. Remarquez que nous ne rendons pas la carte réelle jusqu'à ce que la demande axios soit satisfaite. Cela arrêtera le problème d'origine dans lequel vous rencontrez des données qui n'existent pas encore.

class App extends React.Component {
  state = {
    jsonData: [],
    loading: true
  };

  componentDidMount() {
    axios
      .get(
        "https://api.nytimes.com/svc/topstories/v2/science.json?api-key=JoqkiXzZ0GoPgjxFrhHBA42XLzGwAYFq"
      )
      .then(response =>
        this.setState({ loading: false, jsonData: response })
      )
      .catch(error => console.log(error));
  }

  render() {
    return this.state.loading ? (
      <div>loading...</div>
    ) : (
      <div id="cards-wrapper">
        {this.state.jsonData.data.results.map(article => (
          <div key={article.short_url}>{article.title}</div>
        ))}
      </div>
    );
  }
}
1
Win 26 janv. 2019 à 21:27

La réponse renvoie un tableau nommé results, pas data donc vous n'y accédez pas avec:

console.log(this.state.jsonData.data)

Mais avec

console.log(this.state.jsonData.results)
0
stever 26 janv. 2019 à 21:22

Est-ce simplement une faute de frappe? car il ne peut pas lire le résultat, mais ses résultats.

this.state.jsonData.data.results
-1
Per Digesen 26 janv. 2019 à 21:17