题图为创作者拍于四川稻城亚丁五色海。

hooks 的闭包圈套是一个老调重弹问题了,但依旧往往会在开发设计时忽视。近日再度遭遇到了这种情况,记录一下。

发觉 bug

要求非常简单:一个信用卡上面有好几个保存按钮,点一下后要求文件地址。大约完成如下所示:

export default function App() {
const [loadingMap, setLoadingMap] = useState({});
const handleClick = async (key) => {
setLoadingMap({ ...loadingMap, [key]: true });
await delay(3000);
setLoadingMap({ ...loadingMap, [key]: false });
};

return (
<div className="App">
<button onClick={() => handleClick("a")}>
{loadingMap.a ? "加载中" : "免费下载a"}
</button>
<button onClick={() => handleClick("b")}>
{loadingMap.b ? "加载中" : "免费下载b"}
</button>
</div>
);
}

详细:eventHandler 的闭包难题

测试时发现的问题:假如连续点击 a 和 b 按键,当 b 免费下载结束后,a 按键能被重设为”加载中”。adminjs.Cn 工作生活学习必备

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:hooks 闭包圈套是一个老调重弹问题了,但依旧往往会在开发