所以我的 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 秒后，我从菜单中选择组织 2，它的 API 请求将是即时的，右侧面板将使用组织 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 始终是我们触发请求本身时所拥有的，而不是最新的部分。好像它不再与来自更高组件状态的props中的最近值相关联