在 React 中将多个 Fetch 语句与 ComponentWillMount 结合使用
介绍
在 React 应用中编写代码时，您很可能需要从外部 API 获取数据，以便根据该数据呈现视图。但是，将异步代码引入应用总是会带来复杂性的开销。为了帮助应对这种复杂性，React 引入了组件生命周期钩子。组件生命周期钩子是在组件“生命周期”的某些阶段触发的方法。过去在 HTTP 请求方面使用的两个最常见的组件生命周期钩子是componentWillMount和componentDidMount。
在本指南中，您将了解过去如何使用componentWillMount和componentDidMount发出 HTTP 请求。您还将了解如何执行多个 HTTP 获取请求以获取其中的数据。
componentWillMount 生命周期钩子
componentWillMount曾经是任何组件生命周期不可或缺的一部分。我说“曾经是”是因为现在，componentWillMount从 React v. 17 开始被弃用了！在很多应用中，它是用于请求数据的生命周期钩子，正如名称所暗示的那样，这将是执行请求的地方！然而，这种方法的问题是，组件渲染函数必须保证在componentWillMount中执行 HTTP 请求之前运行。这通常意味着，如果数据依赖于 HTTP 请求，则您的组件在其视图层中没有数据显示。
因此，您最终需要显示某种默认数据或加载屏幕，直到 HTTP 请求返回，因为渲染函数将在请求成功执行之前运行。最终，这意味着您可以放弃使用componentWillMount，只需在类组件的构造函数中设置一些默认数据或加载屏幕。然后，您可以将 HTTP 请求移至componentDidMount生命周期方法。componentDidMount生命周期方法保证在执行第一个渲染函数后直接运行。这使其成为获取数据的可靠选择！
在 componentDidMount 中使用多个 Fetch 语句
在本节中，您将学习如何使用 Fetch API 从两个不同位置发出 HTTP 请求并合并结果。让我们开始编写代码吧！
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
mergedData: this.props.defaultData
}
}
componentDidMount() {
Promise.all([
fetch(this.props.urlOne).then(res => res.json()),
fetch(this.props.urlTwo).then(res => res.json())
]).then(([urlOneData, urlTwoData]) => {
this.setState({
mergedData: urlOneData.concat(urlTwoData)
});
})
}
render() {
return (
<div>
<h1>Check out this Data!</h1>
<DataView data={this.state.mergedData}/>
</div>
)
}
}
在上面的简单示例中，您可以看到MyComponent组件。此组件通过父组件从 props 获取一些默认数据。这是最初将显示的数据。
然后在componentDidMount生命周期方法中，针对两个不同的 API 执行多个 fetch 语句。Promise.all方法用于将这些fetch调用的结果合并到一个数组中。使用Promise.all允许组件并行执行这些请求。一旦两个响应完成，您将得到一个包含两个子数组的数组。然后调用setState方法，以便根据两个子数组的连接结果设置mergedData状态。
就这样！您刚刚学习了如何使用 Fetch API 在componentDidMount生命周期方法中执行多个 HTTP 请求。
结论
componentWillMount生命周期方法已过时。请谨慎使用！今后，所有 HTTP 请求都应在componentDidMount生命周期方法中发出。
如果您使用的是功能组件而不是类组件，还有另一种获取数据的方法。那就是使用useEffect钩子。有关useEffect 的更多信息，请查看 React文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~