在useState hooks中,使用不同的方法更新state - 兴趣小组
返回

在useState hooks中,使用不同的方法更新state

useState是一个帮助组件保存本地状态的hook,使用useState hook更新state,这里有两种不同的方式。

让我们来计算一下按钮的点击次数,
const [clicks, setClicks] = useState(0);
初始计数为0

1、更换state
每次点击按钮,你可以简单计算+1,

const handleClick = () => {
setClicks(clicks + 1);
};

例子:https://codesandbox.io/s/react-memo-in-action-qc65m?from-embed

如果你的更新是同步的并只在一个地方,这种更新方式会工作的很好。
但是如果点击值在不同位置异步更改,这样你的点击值容易是旧的state,这会使你的计数出错。
为了避开旧的state,你可能总是要获取上一个state并替换它。

2、更改先前的状态值

const handleClick = () => {
setClicks(prevCount => prevCount + 1);
};

例子:https://codesandbox.io/s/setstate-using-previous-value-vuyph?from-embed

这种方式,你可以总是获取最近的state值,并基于它计算一下state。

--------------------------------

译文来源于:https://jsmates.com/blog/different-ways-to-update-use-state-hooks
1月19日编辑于 1月19日
点赞
转发
收藏
@sword1月19日1人点赞
点赞回复
英语不是很好,第一次翻译英文文章,当作英语练习了。
同时还能学点技术知识。
@plain1月19日1人点赞
点赞回复
但设置好状态后就调用接口的话,是获取不到最新的值的,需要用到 useEffect,然后第二个参数写上需要用的状态名。
@sword1月20日via iPhone PWA1人点赞
点赞回复
useState的callback事件目前只知道useEffect方案,还未发现其他方法。
@plain1月20日
点赞回复
是的。其他方案暂时没有发现。可能这个就是hook这么设计的吧,这一个也够用了,也比类的方式好用。
@plain1月20日
点赞回复
刚刚你应该删除一个回复,我的提醒变成了这样

@sword1月20日via iPhone PWA
点赞回复
bug,回头我修复一下。