如何解决在承诺解决方法中,状态总是过时的
所以我的SPA遇到了关于状态的怪异问题。
我有一个包含项目的左侧菜单,比方说组织,当我单击任何一个项目时,右侧面板会随着所选组织内的相应用户列表而变化。
例如:我在列表中有组织1和组织2,如果单击组织1,则向中间件发送请求以检索该组织内的用户列表,如果我选择组织2,则执行此操作同样的事情。
所以我有一个更高的组件Organisation.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} />
);
UsersView.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的菜单中选择了Organization 2,则右侧面板将使用Organization 2数据进行更新,但是5秒钟后,当Organization 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始终是我们触发请求本身时拥有的那个,而不是最新的部分。好像不再与来自较高组件状态的props中的最新值绑定了
解决方法
使用功能更新程序功能与最新状态进行比较
所以可能的解决方案与what I linked in the comment完全相关,尽管起初可能并不那么明显。
首先,您需要稍微改变状态结构。如果随着时间的推移变得太复杂了,您可能想看看useReducer
,context 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
函数引用(在每个渲染周期中重新创建)内部更改。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。