为什么我的 fetch promise 存储在 prop 中是空的，而不是我正在获取的 json？

Question

我正在尝试从后端获取 json 来填充前端的表格。什么都没有加载，并且在反应调试工具中它说 table prop 是空的。

我已将异步添加到正在执行提取的函数中，但它似乎仍然在完成之前将 json 传递给道具（不完全确定）。

编辑：代码中缺少行，因为我删除了不相关的内容

在 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

在 table.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 时 prop 是空的

Answer 1

将您的获取逻辑移到我建议的组件DidMount 中的Reacts 生命周期方法之一中，您永远不应该在渲染方法中获取任何内容，甚至应该避免在那里进行大量计算.. 获得数据后，我会将其保存在本地组件状态 this.setState({someState: data}) .. 当状态改变时，您的组件将自动重新渲染。你可以从你的组件状态中读取数据 this.state.someState

您从 fetch 中获得 thenable 承诺，您可以使用 .then(function () {}) 来定义获取数据时会发生什么

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

Answer 2

您可以在async componentDidMount 方法中执行async 任务：

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 语法为not covered