Как я могу использовать только новое установленное состояние? - PullRequest
Новая
       14

Как я могу использовать только новое установленное состояние?

0 голосов
/ 30 октября 2019

Итак, я использую github api и хочу использовать данные из состояния в дочернем компоненте, но он однажды примет исходное состояние и после того, как асинхронная функция выполнит данные, которые я установил. Как я могу использовать только данные из 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>

    )

Ответы [ 3 ]

1 голос
/ 30 октября 2019

Если это еще не так, вам необходимо выполнить вызовы API в componentDidMount жизненном цикле вашего компонента.

Кроме того, вы должны поддерживать состояние вызова API (флаг isFetching в исходном состоянии). ). 

...
   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();
  }
...

Где ваше начальное состояние: 

state = {
   isFetching: false,
   data: null
}

Затем в методе render проверьте статус вызова API: 

  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>

    )
}
0 голосов
/ 30 октября 2019

Вы должны дождаться данных при вызове API и сохранении в состояние, проверив, что this.state.data не пусто. 

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>

        )
0 голосов
/ 30 октября 2019 
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>

    )
}
...