承诺解析方法中的状态总是过时的

Question

所以我运行关于我的 SPA 关于状态的奇怪问题。

我有一个包含项目的左侧菜单，比方说组织，当我单击其中任何一项时，右侧面板随 selected 组织内的相应用户列表而变化。

例如：我在列表中有组织 1 和组织 2，如果我单击组织 1，我会向中间件发送请求以检索该组织内的用户列表，如果我 select组织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 呼叫，当响应来了，各州都乱了。

例如：如果我从菜单 Organization 1 select，我们向中间件发送 3 个请求，这些请求将保持挂起状态，比方说 10 秒。

如果 5 秒后，我从菜单中选择组织 2，它的 API 请求将是即时的，右侧面板将使用组织 2 数据更新，但 5 秒后，当组织 1请求得到响应，列表更新为组织 1 数据，这是我试图阻止的，因为现在我们有 selected 组织 2.

我在 .then() 中有 console.logs 的原因是因为我试图在当前 selectedOrganization !== 中的 organization.id 时阻止更新状态响应。

但不幸的是，即使我已经 selected 组织 2，上面场景中的 console.logs 应该是组织 id = 1 而不是 2。

例如：

我 select 组织 1，然后我 select 组织 2

一旦我 select 组织 2，外部 *1 console.log 将立即在我的浏览器中记录 2。

但是当我得到 1 的 API 响应时，.then() 中的 console.logs 给我 1 而不是 2，我希望他们给我 2 这样我就可以做一个if (request.organization_id !== selectedOrganization.id) -> 不要更新状态

长话短说，似乎当 API 调用 returns 结果时，.then() 中的 organization.id 始终是我们解雇时的结果请求本身，而不是最新的部分。好像它不再与来自更高组件状态的 props 中的最近值相关联

Answer 1

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

所以一个可能的解决方案与完全相关，尽管一开始可能并不那么明显。

首先，您需要稍微更改状态结构。如果随着时间的推移这变得太复杂，您可能想看看 useReducer, the context API，或者像 Redux 或类似的 full-fledged 状态管理库。

然后，使用功能更新程序功能与最新状态值进行比较，如果所选组织已更改，则该值可能已更改。

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 函数引用（每个渲染周期都会重新创建）内部的值也不会改变。

承诺解析方法中的状态总是过时的

State is always outdated inside the promise resolve method

javascript

state

state-management

reactjs

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