0
votes

Devenir indéfini en essayant d'aller chercher des données d'une API - réagir

Donc, je tente de définir une variable avec les données im obtenues de l'API.

Lorsque je console im dans mon navigateur, tout fonctionne bien, mais lorsque je tente de définir ma variable sur réagir la variable de réagir. Quelqu'un peut-il me dire ce que je manque ici? p>

Ceci est mon code: P>

import React from 'react'

let news
function getNews () {
  fetch(
    'https://newsapi.org/v2/top-headlines?country=us&apiKey=6f9cf5e6b9684bd3a6a8117e35feb1c9'
  )
    .then(res => res.json())
    .then(data => {
      news = data
      return news
    })
}

getNews()
class NewsApi extends React.Component {
  render () {
    return <div />
  }
}

export default NewsApi

reactjs

1 commentaires

Consultez ma réponse, marque acceptée si cela fonctionne pour vous.

3 Réponses :

1
votes

Votre fonction GetNews est asynchrone. Vous devez utiliser l'état pour enregistrer vos données. Donc, dès que les données récupérées, vous pouvez utiliser les données de votre composant.

import React from 'react';

class NewsApi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            news: []
        };
        this.getNews = this.getNews.bind(this);
    }

    componentDidMount() {
        this.getNews()
    }

    getNews() {
        fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=6f9cf5e6b9684bd3a6a8117e35feb1c9')
            .then(res => res.json())
            .then((data) => {
                this.setState({news:data.articles});
            });
    }

    render() {
        console.log(this.state.news)
        return (
            <div></div>
        );
    }
}

export default NewsApi;

2 commentaires

Merci votre replay. N'a pas choisi si cela fonctionne encore. Mais je me demande juste. Y a-t-il un moyen de réagir autour de la solution d'état? Je veux dire, je ne peux pas utiliser les variables globales dans ce cas?

Si vous devez utiliser les données de votre composant, utilisez-le de l'état. Parce que Fetch est asynchrone et on ne sait jamais lorsque les données sont récupérées. Une autre solution consiste à utiliser le champ de rappel ou l'observateur pour la valeur. Je pense que la manière la plus indolore de réagir, en utilisant des états ou des états mondiaux (Redux ou Flux)

0
votes

Essayez ceci: il génère ce que vous voulez. ** Remarques: Fetch est des fonctions asynchrones, des moyens, il faut être appelé à l'intérieur (par exemple) la méthode du cycle de vie comme composantdidmount.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      news: []
    };
  }

  componentDidMount() {
    fetch(
      "https://newsapi.org/v2/top-headlines?country=us&apiKey=6f9cf5e6b9684bd3a6a8117e35feb1c9"
    )
      .then(response => response.json())
      .then(data => this.setState({ news: data.articles }));
  }

  render() {
    console.log(this.state.news);
    return <div />;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

0 commentaires

0
votes

S'il vous plaît regarder l'extrait ci-dessous pour un exemple d'exemple strong>.

Certains points de clé forts>: p>

Essayez de faire vos données aller à ComponentDidMount () strong> li>
Utilisez état fort> et Ceci .SetState () code> strong>
Cela causera un RERENDRE AUTOMATIQUE AUTOMATIF STRAND> après la récupération des données.
Handy pour travailler avec asynchrone strong> Appels de fonction : Ces outils facilitent la tâche utilisent des données dans des composants sans savoir quand il deviendra disponible sur strong> et aider à éliminer le problème non défini code> que vous étiez. li> ul> p> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script> <div id="root"></div>

0 commentaires