如何在 React 渲染函数中使用 async/await

在 React 中，渲染函数通常用于纯同步操作。但是，在某些场景下，您可能会遇到需要在此函数内执行异步任务的情况。本文将讨论如何在渲染函数中有效地使用 async/await 语法。

理解问题

正如问题所强调的，尝试使用 async/直接在渲染函数中的地图函数中等待可能会导致意外行为。这是因为地图函数需要同步操作，并且尝试在其中执行异步调用可能会中断渲染过程的流程。

将数据获取与显示分离

为了解决这个问题，建议将数据获取过程与显示逻辑分开。与其在渲染函数中执行异步操作，不如在单独的组件或钩子中启动数据获取更合适。

父组件中的异步数据获取

在这种方法中，您创建一个父组件（例如，ParentThatFetches），负责发出异步请求和管理数据。利用生命周期方法或挂钩，父组件获取数据并将其存储在状态中。随后，父组件有条件地渲染一个纯函数子组件（例如 Child），该子组件接收获取的数据作为 props。

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 }) => (

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

使用 Hooks 获取数据

随着 React 中 Hooks 的出现，数据获取可以进一步简化。以下代码片段演示了如何使用钩子异步获取数据并相应地更新状态：

const ParentThatFetches = () => {
const [data, updateData] = useState();
useEffect(() => {

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();

}, []);

返回数据 &&
}