在一个测试页面写简单的测试函数时候,遇到一个页面刷新问题。同一个函数被调用了几次。
const [msg, setMsg] = React.useState("");
async function updateGoodsQty2() {
...
setMsg(rsp.message)
}
async function updateGoodsQty3() {
...
setMsg(rsp.message)
}
async function updateGoodsQty4() {
...
setMsg(rsp.message)
}
return (
<div className="px-3 py-2">
<p>{msg}</p>
<Button onClick={updateGoodsQty2} className="btn btn-default">更新货物数量2</Button>
<Button onClick={()=>{updateGoodsQty3()}} className="btn btn-primary">更新货物数量3</Button>
<Button onClick={updateGoodsQty4()} className="btn btn-success">更新货物数量4</Button>
</div>
);
按钮2和按钮3 的写法是没问题,正常调用。
按钮4的写法就要注意了:系统有Warning提示:这样写虽然可以运行,可是页面会随着node.js的刷新机制,调用多次对应的函数(updateGoodsQty4)。
按钮2和4的写法容易混淆。以后统一采用3的写法,就是繁琐一点。否则就要死记硬背的使用2的写法。