javascript - 在 promise resolve 方法中状态总是过时的
问题描述
所以我在我的 SPA 中遇到了一个关于状态的奇怪问题。
我有一个带有项目的左侧菜单,比如说组织,当我单击其中任何一个时,右侧面板会随着所选组织内的适当用户列表而变化。
例如:我在列表中有组织 1 和组织 2,如果我单击组织 1,我会向中间件发送请求以检索该组织内的用户列表,如果我选择组织 2,我也会做同样的事情。
所以我有一个更高的组件 Organization.js,它具有以下代码:-
// Organization.js
const [selectedOrganization, setSelectedOrganization] = useState(null);
// This method will be called when we select an organization from the menu
const handleSelectedOrganization = organization => {
if (!selectedOrganization || selectedOrganization.id !== organization.id) {
setSelectedOrganization(organization);
}
};
return (
<UsersView selectedOrganization={selectedOrganization} />
);
用户视图.js
const UsersView = ({ selectedOrganization = {} }) => {
const [selectedOrganizationUsers, setSelectedOrganizationUsers] = useState(
[]);
let globalOrganization = selectedOrganization?.id; // global var
const refreshOrganizationsList = () => {
const localOrganization = selectedOrganization.id; // local var
Promise.all([ // bunch of requests here]).then(data => {
console.log('from global var', globalOrganization); // outdated
console.log('from local var', localOrganization); // outdated
console.log('from prop', selectedOrganization.id); // outdated
setSelectedOrganizationUsers(data.result); // data.result is an array of objects
});
};
// Will be called when the selectedOrganization prop changes, basically when I select
//a new organization from the menu, the higher component will
// change state that will reflect here since the prop will change.
useEffect(() => {
if (selectedOrganization) {
globalOrganization = selectedOrganization.id;
refreshOrganizationsList();
}
}, [selectedOrganization]);
console.log(selectedOrganization?.id); // Always updated *1
return (
{selectedOrganizationUsers?.length ? (
<>
<div className="headers">
....
)
现在的问题是,一些 API 调用需要很长时间才能响应,并且在特定情况下,当我在组织之间快速切换时,我们会收到一些待处理的 API 调用,当响应到来时,状态就会混乱。
例如:如果我从菜单组织 1 中选择,我们会向中间件发送 3 个请求,这些请求将保持等待状态,比如说 10 秒。
如果 5 秒后,我从其 API 请求将立即发出的菜单中选择组织 2,右侧面板将使用组织 2 数据进行更新,但 5 秒后,当组织 1 请求获得响应时,列表将更新使用组织 1 数据,这是我试图阻止的,因为现在我们选择了组织 2。
我在 .then() 中有 console.logs 的原因是,当响应中的当前 selectedOrganization !== organization.id 时,我尝试阻止更新状态。
但不幸的是,即使我已经选择了组织 2,上述场景中的 console.logs 也应该是组织 id = 1 而不是 2。
例如:
我选择了组织 1,然后我选择了组织 2
一旦我选择了组织 2,外部 *1 console.log 将立即在我的浏览器中记录 2。
但是当我得到 1 的 API 响应时,.then() 中的 console.logs 给我 1 而不是 2,我希望他们给我 2 以便我可以创建一个 if (request.organization_id !== selectedOrganization.id ) -> 不更新状态
长话短说,似乎当 API 调用返回结果时,.then() 中的 organization.id 始终是我们触发请求本身时的那个,而不是最新的部分。好像它不再与来自更高组件状态的道具中的最近值相关联
解决方案
使用功能更新器功能与最新状态进行比较
因此,一个可能的解决方案与我在评论中链接的内容完全相关,尽管一开始可能并不那么明显。
首先,您需要稍微更改状态结构。useReducer
如果随着时间的推移这变得过于复杂,您可能需要查看上下文 API或像 Redux 或类似的成熟的状态管理库。
然后,使用功能更新程序功能与最新的状态值进行比较,如果所选组织发生了变化,这些值可能已经发生了变化。
const UsersView = ({ selectedOrganization }) => {
// Slightly change the state structure.
const [{ users }, setState] = useState({
currentOrgId: selectedOrganization?.id,
users: [],
});
const refreshOrganizationsList = (orgId) => {
// Set the currentOrgId in the state so we remember which org was the last fetch for.
setState((state) => ({ ...state, currentOrgId: orgId }));
Promise.all([
/* bunch of requests here */
]).then((data) => {
setSelectedOrganizationUsers((state) => {
// Is the current org still the one we started the fetch for?
if (state.currentOrgId !== orgId) {
// Precondition failed? Early return without updating the state.
return state;
}
// Happy path, update the state.
return {
...state,
users: data.result,
};
});
});
};
useEffect(() => {
if (selectedOrganization) {
// instead of a component scoped variable, just pass the id as a param.
refreshOrganizationsList(selectedOrganization.id);
}
}, [selectedOrganization]);
return (/* JSX here */);
};
不再需要局部变量。事实上,局部变量被闭包捕获,即使再次渲染组件,旧refreshOrganizationsList
函数引用内部的值也不会改变(每个渲染周期都会重新创建)。
推荐阅读
- python - 是否可以在同一个字符串上有两种字体大小(对于标签或按钮)?
- docker - 在 Dockerfile 中重定向 RUN 命令的 STDOUT
- javascript - 支持 React 组件中 switch 语句中的可选参数
- java - 我想了解 BubbleSort,但我很难理解教授提供的代码中的特定部分
- python - 将输入值与 CSV 值匹配以发送电子邮件
- python - 如何查询 SNMP 以从 IP 获取 OID 和日期
- three.js - 如何在 Autodesk Forge 中将点云模型添加到查看器
- r - 如何在 R 中使用 ggplot 绘制多列?
- database - 具有不同产品颜色的多个页面
- javascript - Discord.js 男高音 gif 丰富的嵌入