在承诺解决方法中，状态总是过时的

编程问答 2022-08-14

问题描述

所以我的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函数引用（在每个渲染周期中重新创建）内部更改。

javascriptreactjsreactjsstatestate-management