0
votes

Comment puis-je utiliser uniquement le nouvel état défini?

J'utilise donc github api et je souhaite utiliser les données de l'état dans un composant enfant, mais cela prendra une fois l'état initial et une fois la fonction async terminée, les données que j'ai définies. Comment puis-je utiliser uniquement les données de setState?

    fetch('https://api.github.com/search/topics?q=javascript', {
      headers: {
        'Accept': 'application/vnd.github.mercy-preview+json'
      }
    })
    .then(res => res.json())
    .then(json => this.setState({ data: json }));
  }

  render() {
    console.log(this.state);

    return (
      <Router>
        <Header jsTrendingName={this.state.data}/>
        <Switch>
          <Route path="/" exact component={Dashboard} />
          <Route path="/home" component={Home} />
        </Switch>
      </Router>

    )

javascript reactjs lifecycle

6 commentaires

Rahul Cristian à quel problème êtes-vous confronté?

La console enregistre l'état initial et après le nouvel état défini. Je n'ai besoin que du nouvel état établi.

@ Gim-CojocaruRahul-Cristian vérifie que cela est résolu pour vous. stackoverflow.com/a/58624890/6544460 .

non, ça ne résout pas ça pour moi. mais c'est mieux écrit. Merci

veuillez voter / accepter si cela vous est utile.

La réponse de @ Gim-CojocaruRaul-Cristian pritam devrait le résoudre pour vous. Il n'y a aucun moyen «d'ignorer» le premier état, cependant, vous pouvez afficher un indicateur de chargement pendant que l'appel d'API est en cours. Ensuite, une fois l'appel d'API effectué, vous pouvez à la place afficher les données souhaitées.

3 Réponses :

0
votes

this.state = { data: []};

componentDidMount(){
    fetch('https://api.github.com/search/topics?q=javascript', {
      headers: {
        'Accept': 'application/vnd.github.mercy-preview+json'
      }
    })
    .then(res => res.json())
    .then(json => this.setState({data: json.items}));
  }

     render() {
    const {data} = this.state;

    return (
      <Router>
        <Header jsTrendingName={data}/>
        <Switch>
          <Route path="/" exact component={Dashboard} />
          <Route path="/home" component={Home} />
        </Switch>
      </Router>

    )
}

1 commentaires

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la manière et / ou la raison pour laquelle il résout le problème améliorerait la valeur à long terme de la réponse.

0
votes

Vous devez attendre les données en appelant l'API et en enregistrant dans l'état en vérifiant que this.state.data n'est pas vide.

fetch('https://api.github.com/search/topics?q=javascript', {
          headers: {
            'Accept': 'application/vnd.github.mercy-preview+json'
          }
        })
        .then(res => res.json())
        .then(json => this.setState({ data: json }));
      }

      render() {
        console.log(this.state.data && this.state.data); // You should wait for data here then log it or use it.

        return (
          <Router>
            <Header jsTrendingName={this.state.data}/>
            <Switch>
              <Route path="/" exact component={Dashboard} />
              <Route path="/home" component={Home} />
            </Switch>
          </Router>

        )

1 commentaires

1
votes

Si ce n'est déjà fait, vous devez effectuer des appels d'API dans le cycle de vie componentDidMount de votre composant.

De plus, vous devez conserver l'état de votre appel API (indicateur isFetching dans votre état initial).

  render() {
    const { isFetching } = this.state;

    if (isFetching) {
        return <span> Loading ... </span>
    }
    // isFetching is false now since API call is complete.
    console.log(this.state);

    return (
      <Router>
        <Header jsTrendingName={this.state.data}/>
        <Switch>
          <Route path="/" exact component={Dashboard} />
          <Route path="/home" component={Home} />
        </Switch>
      </Router>

    )
}

Où est votre état initial:

state = {
   isFetching: false,
   data: null
}

Ensuite, dans la méthode render , vérifiez l'API état de l'appel:

...
   getJSData = () => {

   // set isFetching to true before API call is made
   this.setState({ isFetching: true });

   fetch('https://api.github.com/search/topics?q=javascript', {
      headers: {
        'Accept': 'application/vnd.github.mercy-preview+json'
      }
    })
    .then(res => res.json())
    .then(json => this.setState({ data: json }));
  }

  componentDidMount() {
     // Call your API
     this.getJSData();
  }
...

0 commentaires