使用 Axios 等 HTTP 客户端在 context-api 状态下存储获取的数据是一个好习惯吗？

Posted 2023-04-14

【中文标题】使用 Axios 等 HTTP 客户端在 context-api 状态下存储获取的数据是一个好习惯吗？

【英文标题】：Is the storage of data acquired, with an HTTP-Client such as Axios, in the context-api state a good practice?

【发布时间】：2019-12-23 16:47:48

【问题描述】：

我一直在使用 react 16.8 开发一个应用程序，为了避免在每个组件中导入 Axios，我开始使用上下文 API 来保存我所有请求的内部状态数据，并在我需要的组件中引用这些数据它与<Consumer/> 一起使用，但是状态中的属性数量大大增加，我想知道这是否可以，如果我应该在使用我需要的数据后以ComponentWillUnmount 之类的方法清理状态？

Class ContextProvider 
state = 
prop1: [],
prop2: [],
prop3: [],
...n
 

getProp1Data = () => 
Axios.get(url)
.then(res => this.setState(prop1: res.data)


.... n

【问题讨论】：

but the number of properties in the state grew considerably -- 一般的原则是，你使用一个prop数组，而不是使用prop1，prop2，...。

【参考方案1】：

您应该考虑使用 Redux，因为使用 Redux，您可以在开发中的状态历史之间穿梭，并在代码更改时从动作历史中重新评估当前状态。通过这种方式，您只需将 Axios 导入中间件一次，并使您的代码更清晰。

如果您考虑使用 ComponentWillUnmount，您将不会“清理”您的状态，因为无法在此生命周期方法上调用 setState()。 ComponentWillUnmount 与 DOM 上的主管本身有关，与状态无关。您的道具“大幅增长”没有问题，您可以使用任意数量的道具。