javascript - 用于填充 React 组件中下拉列表的多个 API 调用

标签 javascript reactjs redux react-redux

我在 React 组件中有 3 个下拉菜单,分别是 CountryStateRegion。每个下拉列表在填充的数据方面都是独立的。

安装包装器组件时,我需要填充下拉列表中的数据。我使用 redux 进行 API 调用和数据获取。

我应该在组件中分派(dispatch)三个操作吗?在react-redux设置中从API响应填充3个下拉菜单应该是什么方法?

最佳答案

API 调用通常被视为异步操作。当您说每个下拉列表“国家”、“州”和“地区”的数据获取彼此独立时,最好的做法是分派(dispatch)三个单独的调用。

原因:只有在获取数据后才会填充下拉组件,并且所有 api 响应都是异步获取的。 如果您分派(dispatch)三个不同的操作,则可以在其他下拉列表仍处于加载状态时填充任意一个、两个或三个下拉列表;凭借此功能,用户可以在其他国家/地区加载时选择国家/地区,并且不会浪费时间(更好的用户体验)

注意:查看Observables ,它们通过用一个 Action 调度三个 Action 来完成您正在做的事情。可观察量不仅仅是合并请求,并且无法在这个答案中进行解释。

关于javascript - 用于填充 React 组件中下拉列表的多个 API 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51472270/

相关文章:

javascript - 表格滚动上的两个固定标题 - 添加边框

javascript - js事件和DOM事件有什么区别?

reactjs - store.dispatch、useDispatch和useReducer的dispatch有什么区别?

reactjs - React 中的 onMouseDown 事件不会触发状态更改,但 onClick 会触发

reactjs - 确保使用某个组件的新实例

javascript - React Redux 忽略调度

javascript - 捕获开始标签但不捕获结束标签

javascript - jquery多选列表更新失败

reactjs - easy-peasy:useStoreState 不适用于 ES6 类实例

css - 为什么 flex-direction 不能按照我设置的方式工作? react js