React Redux -在派单问题之前快速刷新之前的状态
我正在构建一个带有Node.js后端的React + Redux应用程序，其中一个功能是用户可以查看其他用户的个人资料。为此，我在Redux state中有一个名为users的部分，如下所示：
{
...,
users: {
user: {},
isLoading: true
}
}每次呈现/users/:id路由时，都会调度一个getUser(id)操作，并用接收到的信息填充状态。
主要问题是，当用户查看用户1的配置文件页面(因此redux状态现在填充了用户1的配置文件)，然后查看用户2的配置文件页面时，在页面呈现后立即调用dispatch getUser(2)操作。由于user1的信息仍然处于该状态，它将在很短的时间内刷新他们的信息，然后显示加载微调器，直到新用户被加载。
我读到过有关在每次卸载页面时分派resetUser(id)操作的内容，但我不确定这是否是正确的方法。此外，其中一个功能是，如果用户正在查看自己的页面，他们会有一个编辑按钮，可以将他们重定向到/edit-profile。如果我在每次卸载时重置状态，我将不得不再次获取他们的个人资料(在编辑页面中)，即使我只是在他们查看他们的页面时这样做。这看起来是不合理的。
有什么办法解决这个问题吗？谢谢!
回答 2
Stack Overflow用户
发布于 2020-08-15 13:25:18
在mounting之后运行render阶段。你说以前的数据在新数据之前显示。看起来你有异步挂载：
async componentDidMount() {}它将继续渲染，甚至在安装阶段完成之前。为了避免出现问题，您可以使用同步挂载：
componentDidMount(){}您将在其中调用api数据。
现在，当你到达渲染阶段时，它将在渲染之前有新的数据可用，而不会闪烁你的旧数据。
您现在可能想知道如何异步调用api。您可以创建一个异步函数，并在同步componentDidMount中调用该函数。
componentDidMount() {
yourAsyncFunc()
}
async yourAsyncFunc() {} // api call我如何使用React钩子来做这件事？
使用useEffect时，不要实现异步：
useEffect(async () => 简单地实现它：
useEffect(() => {
// you can still use asynchronous function here
async function callApi() {}
callApi()
}, []) // [] to run in similar to componentDidMount如果你错过了useEffect的第二个参数，那么你就不能确保它在挂载阶段运行。它将在渲染之前、之后和渲染阶段运行，具体取决于大小写。
Stack Overflow用户
发布于 2020-10-27 11:05:40
在这里实现像resetUser(id)这样的东西似乎是正确的方式。我在我当前的项目中使用了这种方法，这确实解决了问题。在另一个答案中提到的从useEffect回调中删除async关键字的另一种方法对我不起作用(我使用钩子、redux-toolkit、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,
};
}https://stackoverflow.com/questions/63426393
复制
![[译] 在你学习 React 之前必备的 JavaScript 基础](https://ask.qcloudimg.com/http-save/yehe-1260054/jqvns1yyf8.jpeg)
![[-NDK 导引篇 -] 在NDK开发之前你应知道的东西](https://ask.qcloudimg.com/http-save/yehe-2608304/g0e4esezta.png)
相似问题
减速机派单React Redux
Redux派单与React最终表单
ASP.NET核心React-with-Redux模板派单问题
Redux表单问题(派单不工作？)
Redux派单操作
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
