组件在异步反应上下文更新上呈现两次
组件在异步反应上下文更新上呈现两次
提问于 2019-10-03 23:40:40
我有React应用程序，它使用React上下文来管理状态。我创建了简单的反增量复制。
有两种背景。一个用于存储状态，另一个用于调度。这是一个从这个文章中提取的模式。
状态上下文只存储单个数字，只有一个操作可以在此状态上调用：
function reducer(state: State, action: Action): State {
switch (action.type) {
case "inc": {
return state + 1;
}
}
}我还有两个助手函数，用于同步和异步地递增值：
async function asyncInc(dispatch: React.Dispatch<Action>) {
await delay(1000);
dispatch({ type: "inc" });
dispatch({ type: "inc" });
}
function syncInc(dispatch: React.Dispatch<Action>) {
dispatch({ type: "inc" });
dispatch({ type: "inc" });
}下面是如何在组件中使用它：
const counter = useCounterState();
const dispatch = useCounterDispatch();
return (
<React.Fragment>
<button onClick={() => asyncInc(dispatch)}>async increment</button>
<button onClick={() => syncInc(dispatch)}>sync increment</button>
<div>{counter}</div>
</React.Fragment>
);现在，当我单击sync increment按钮时，一切都将按预期工作。它将调用两次inc操作，将计数器递增2，并且只执行组件的一个重发器。
当我单击async increment按钮时，它将首先等待一秒，并执行两次inc操作，但它将重新复制组件两次。
您必须打开控制台才能查看呈现组件中的日志。
我有点理解这是为什么。当它是一个同步操作时，所有事情都会在组件呈现过程中发生，所以它将首先操作状态并在最后呈现。当它是异步操作时，它将首先呈现组件，在第一秒之后，它将更新状态一次触发重发器，并将第二次更新触发下一次重发器。
那么，是否可以执行异步状态更新，只执行一个重登？在相同的复制中，有类似的示例，但使用的React.useState也存在相同的问题。
我们可以批量更新吗？或者我必须创建另一个操作来同时对状态执行多个操作？
我还创建了这种复制，它通过一系列操作来解决这个问题，但我很好奇它是否可以避免。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58228163
复制相关文章
相似问题
腾讯云开发者
