Promise Resolve方法中的状态始终过期 [英] State is always outdated inside the promise resolve method

问题描述

所以我的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} />
);

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请求是即时的菜单中选择了组织2，则右侧面板将使用组织2数据更新，但是5秒后，当组织1请求获得响应时，列表将使用组织1数据更新，这是我尝试阻止的，因为我们现在选择了组织2。

我在.Then()中有console.logs的原因是因为我尝试在当前选定的组织！==响应中的Organation.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()中的Organation.id始终是我们触发请求本身时拥有的，而不是最新的部分。好像它不再与道具中来自较高组件状态的最近值捆绑在一起

推荐答案

使用函数更新函数与最新状态进行比较

因此，可能的解决方案与what I linked in the comment完全相关，尽管一开始可能不是那么明显。

首先，您需要稍微更改状态结构。如果随着时间的推移，这变得过于复杂，您可能希望查看useReducer、context API或功能齐全的状态管理库(如Redux或类似库)。

然后，使用Functional Updater函数与最新的状态值进行比较，如果选定的组织后来发生了更改，则该值可能已更改。

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函数引用(每个呈现周期都会重新创建)中更改。

这篇关于Promise Resolve方法中的状态始终过期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！