Javascript React Redux-在调度问题之前快速刷新以前的状态

我正在构建一个带有Node.js后端的React+Redux应用程序，其中一个功能是用户可以查看其他用户的配置文件。为此，我在

Redux状态下有一个名为
users
的部分，看起来像：

{
    ...,
    users: {
        user: {},
        isLoading: true
    }
}

每次呈现
/users/:id
路由时，都会调度
getUser（id）
操作，并用接收到的信息填充状态

主要问题是，当用户查看user1的配置文件页面（因此，redux状态现在由user1的配置文件填充）然后查看user2的配置文件页面时，页面呈现后立即调用dispatch
getUser（2）
操作。由于user1的信息仍处于状态，它将在很短的时间内闪烁其信息，然后显示加载微调器，直到加载新用户

我读到了关于在每次卸载页面时调度
resetUser（id）
操作的内容，但我不确定这是否正确。此外，其中一个功能是，如果用户正在查看自己的页面，他们有一个编辑按钮，可将其重定向到
/edit profile
。如果我在每次卸载时重置状态，我将不得不再次获取他们的配置文件（在编辑页面中），即使我只是在他们查看页面时这样做。。这似乎没有什么意义

有什么办法解决这个问题吗？谢谢
 装载后，
渲染
阶段运行。你说以前的数据显示在新数据之前。您似乎有异步装载：

async componentDidMount() {}

componentDidMount(){}

即使在安装阶段完成之前，它仍将继续渲染。为避免问题，您可以使用安装的同步特性：

async componentDidMount() {}

componentDidMount(){}

您将在其中调用api数据

现在，当您到达渲染阶段时，它将在渲染之前具有可用的新数据，并且不会刷新旧数据


您现在可能想知道如何异步调用api。您可以创建一个异步函数并在同步组件didmount内调用该函数

componentDidMount() {
  yourAsyncFunc()
}
async yourAsyncFunc() {} // api call

我怎样才能用钩子做这个

使用
useffect
时，不要实现异步：

useEffect(async () => 

简单地实施它：

useEffect(() => {
  // you can still use asynchronous function here
  async function callApi() {}
  callApi()
}, []) // [] to run in similar to componentDidMount

如果错过了
useffect
的第二个参数，则无法确保它在装载阶段运行。它将根据具体情况在渲染阶段之前、之后和中运行。
实现类似于
resetUser（id）
的方法似乎是正确的。我在当前的项目中使用了这种方法，这确实解决了问题。另一个答案中提到的从
useffect
回调中删除
async
关键字的另一种方法对我不起作用（我使用hooks、redux工具包、Typescript）

发出此操作后，您的状态应该类似

{
  ...,
  users: {
    user: null,
    isLoading: false,
  }
}

如果您使用的是钩子，则可以通过以下方式分派操作：

useEffect(() => {
  const ac = new AbortController();
  ...
  return () => {
    dispatch(resetUser(null));
    ac.abort();
  };
}, []);

行动可以是这样的：

resetListingDetails(state, action) {
  // Immer-like mutable update
  state.users = {
    ...state.users,
    user: null,
  };
}

我不确定你应该采取什么方法来避免之前的数据闪烁，但是编辑页面应该在每次加载数据时绝对地获取数据，原因有很多。我如何使用React钩子来实现这一点？