如何解决反应设置状态不能立即工作
我正在制作一个基于函数的 React 组件,需要使用按钮设置状态,但很快意识到 setstate 运行不佳,这是我使用的代码:
function Test() {
const [index,setindex] = useState(0)
function next() {
console.log(index);
setindex(1)
console.log(index);
}
function pre() {
console.log(index);
setindex(-1)
console.log(index);
}
return (
<div>
<button onClick={next}>next</button>
<button onClick={pre}>previous</button>
</div>
)
}
控制台显示索引在设置之前和之后是相同的,并且它也设置了一个按钮按下的延迟。我知道我可以使用单选按钮来做到这一点,因为出于某种原因它们可以正常工作,但这似乎是一个糟糕的解决方案。你能告诉我为什么它会这样
解决方法
useState 本质上是异步的。如果不会像您期望的那样立即反映。
如果在更改状态后需要任何内容,请使用 useEffect
如下:
useEffect(() => {
if(index === 'blah') { // your value here
console.log(index)
}
},[index]);
或者你可以像这样使用回调:
setState(prevState => {
// Object.assign would also work
return {...prevState,...updatedValues};
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。