您应该始终将获取数据等关注事项与显示数据等关注事项分开。这里有一个父组件，该组件通过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，则应将这些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} />}
