您应该始终将获取数据等关注点与显示数据等关注点分开。这里有一个父组件，它通过 AJAX 获取数据，然后在数据进来时有条件地呈现一个纯函数式子组件。

class ParentThatFetches extends React.Component {
  constructor () {
    this.state = {};
  }

  componentDidMount () {
    fetch('/some/async/data')
      .then(resp => resp.json())
      .then(data => this.setState({data}));
  }

  render () {
    {this.state.data && (
      <Child data={this.state.data} />
    )}
  }
}

const Child = ({data}) => (
  <tr>
    {data.map((x, i) => (<td key={i}>{x}</td>))}
  </tr>
);

我实际上并没有运行它，所以它们可能是一些小错误，如果你的数据记录有唯一的 id，你应该将它们用于键属性而不是数组索引，但你得到了 jist。

更新

同样的事情，但使用钩子更简单和更短：

const ParentThatFetches = () => {
  const [data, updateData] = useState();
  useEffect(() => {
    const getData = async () => {
      const resp = await fetch('some/url');
      const json = await resp.json()
      updateData(json);
    }
    getData();
  }, []);

  return data && <Child data={data} />
}

使用下面的包装函数delay_render()，您可以在 React 组件函数中编写异步代码：

function delayed_render(async_fun, deps=[]) {
    const [output, setOutput] = useState()
    useEffect(async () => setOutput(await async_fun()), deps)
    return (output === undefined) ? null : output
}

这个包装器执行延迟渲染：它null在初始渲染尝试时返回（跳过这个特定组件的渲染），然后通过给定异步计算（useEffect（））正确的渲染输出async_fun()并调用重新渲染以将最终结果注入DOM . 这个包装器的使用非常简单：

function Component(props) {
    return delayed_render(async () => { /* any rendering code with awaits... */ })
}

例如：

function Component(props) {
    return delayed_render(async () => {
        const resp = await fetch(props.targetURL)     // await here is OK!
        const json = await resp.json()
        return <Child data={json} />
    })
}

更新：添加了deps参数。如果您async_fun依赖于 props 或 state 变量，则必须将所有这些都列出deps以允许重新渲染。请注意，传递deps=null（始终重新渲染）在这里不是一个选项，因为它output也是一个状态变量，并且会隐式包含在依赖项中，这将导致async_fun调用完成后无限重新渲染。

该解决方案的灵感来自于 Jared Smith 的解决方案，并且是对其的概括。