[Suggestion]: Section "Queueing a Series of State Updates": await in event handler cause immediate rerender
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 11.8k
- 派生
- 7.9k
- 平均合并
- 1 天 11 小时
- 30 天内合并 PR
- 11
描述
Summary
The documentation says here: "React waits until all code in the event handlers has run before processing your state updates"
This not the case when using await inside the handler!
Example
const [myNumber, setMyNumber] = useState(0);
async function handleClick(){
setMyNumber(i => i + 1);
await delay(100);
setMyNumber(i => i + 1);
}
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
This will rerender the component twice!
Page
https://react.dev/learn/queueing-a-series-of-state-updates
Details
I suggest it should be mentioned as caveat/pitfall that if you call await inside an event handler,
all changes made to states before that await will then be flushed and trigger a rerender immediately, not waiting
for the event handler to finish completely.
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
阅读 issue 中链接的“Queueing a Series of State Updates”页面,并复现其中提供的异步事件处理器示例,以确认其行为。更新该页面,加入说明:await 之前的状态更新可能会在处理器完成之前 flush;当示例和批处理指导准确且清晰时,即视为完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react
- 领域
- documentation
- Issue 类型
- 文档
- 难度
- 1/5
- 预计耗时
- 1 小时以内
- 活跃度
- 停滞
- 描述清晰度
- 描述清楚
- 新手友好度
- 55/100