我有一个设置状态两次的函数 - 第二次setState
必须在第一次之后 500 毫秒后发生setState
已经发生(动画目的)。
代码如下:
const showAnimation = () => {
this.setState({ hidden: false });
setTimeout(() => {
this.setState({ hidden: true });
}, 500);
};
However- 如果我这样做,React 会以某种方式合并这两个setState
进入其中,我的动画没有按预期工作。
但是,如果我使用 hack:
const showAnimation = () => {
setTimeout(() => {
this.setState({ hidden: false });
}, 0); // ------------------------------> timeout 0
setTimeout(() => {
this.setState({ hidden: true });
}, 500);
};
它按预期工作。但我仍然不太喜欢它,而且我担心它可能是某种黑客行为。对于这样的情况有没有更好的解决方案呢?谢谢 :)
As setState
在 React 中是异步的,你可能不会立即获得更新的状态,但是setState
给你prevState
参数输入setState
函数来获取最后更新的状态,这样你就不会合并状态
在你的情况下,语法是这样的
this.setState((prevState) => { hidden: false }, () => {
setTimeout(() => {
this.setState({ hidden: !prevState.hidden });
}, 500);
});
只需使用以下命令将您的值更新为更新后的状态prevState
如果我理解你的问题是正确的,这应该可以正常工作
如果需要更多说明,请告诉我
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)