Почему мое обещание извлечения хранится в подпорке как пустое вместо json, который я получаю?

Question

Я пытаюсь схватить json со своего бэкэнда, чтобы заполнить стол на переднем конце. Ничего не загружается, и в средствах реагирования на отладку он говорит, что настольная подпорка пуста.

Я добавил асинхронную функцию для функции, которая выполняет выборку, но все еще, кажется, передает JSON подпорке до еезакончен (не совсем уверен).

РЕДАКТИРОВАТЬ: строки пропущены в коде, потому что я вырезал то, что было unrelevent

в app.js

import React, { Component } from 'react'
import Table from './Table'

class App extends Component {
    render() {
        const repos = getGitHubRepos()
        return (
            <div className="container">
                <Table repoData={repos} />
            </div>
        )   
    }   
}   

async function getGitHubRepos() {
    const response = await fetch('valid url i'm hiding')
    return await response.json()
}   

export default App

в таблице. js

import React, { Component } from 'react'

class Table extends Component {
    render() {
        const { repoData } = this.props

        return (
            <table>
                <TableHeader />
                <TableBody repoData={repoData} />
            </table>
        )
    }
}


const TableBody = props => {
    const rows = props.repoData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.lang}</td>
            </tr>
        )
    })

    return <tbody>{rows}</tbody>

}

export default Table

Я ожидаю, что выходные данные отобразят каждый бит json в таблицу, но этого не происходит, потому что реквизит пуст, когда он попадает в table.js

Answer 1

Вы можете выполнять async задач в async componentDidMount методе:

class App extends Component {
  constructor() {
    super();
    this.state = { repos: [] };
  }
  async componentDidMount() {
    const repos = await getGitHubRepos();
    this.setState({ repos });
  }
  render() {
    return (
      <div className="container">
        <Table repoData={this.state.repos} />
      </div>
    );
  }
}

async function getGitHubRepos() {
  const response = await fetch("valid url Im hiding");
  return response.json();
}

export default App;

Имейте в виду async/await Синтаксис не распространяется всеми браузерами

Answer 2

Переместите вашу логику выборки в один из методов жизненного цикла Reacts. Я бы предложил компонентDidMount, вы никогда не должны ничего выбирать в методе рендеринга, вам даже следует избегать обширных вычислений там ... после того, как вы получите данные, я сохраню их всостояние локального компонента с помощью this.setState ({someState: data}) .. при изменении состояния ваш компонент автоматически выполнит рендеринг. Вы можете прочитать данные из состояния вашего компонента this.state.someState

Вы можете получить обещаемое обещание из выборки, которое можно использовать .then (function () {}), чтобы определить, что происходит при получении данных

 function getGitHubRepos() {
     fetch('valid url i'm hiding')
     .then(function (res) {
        this.setState({data: res.data}); // or something similar
      });
  }