我遇到反应功能问题, 当我的主要功能完成时,另一个被触发。 所以我依赖这个函数不会结束,直到状态更新。 我能做什么?
_toggleIsCollapsed = () => {
const { isBlocked } = this.state;
if (isBlocked) {
console.log('blocked');
}
this.setState(
prevState => ({ isCollapsed: !prevState.isCollapsed }),
() => {
console.log('isCollapsed: ' + this.state.isCollapsed);
console.log('done1');
}
);
// Always this line is fired first
console.log('done2');
};
我想要达到的结果是:
// done1
// done2
答案 0 :(得分:0)
你可以在代码中放置一个setTimeout(),它取决于setState中正在改变的状态
我正在使用你想在done2之前完成1
_toggleIsCollapsed = () => {
const { isBlocked } = this.state;
if (isBlocked) {
console.log('blocked');
}
this.setState(
prevState => ({ isCollapsed: !prevState.isCollapsed }),
() => {
console.log('isCollapsed: ' + this.state.isCollapsed);
console.log('done1');
}
);
// Always this line is fired first
setTimeout(() => console.log('done2'), 200)
};
答案 1 :(得分:0)
您可以在setState
完成后执行一个函数,并在callback
中调用第二个参数,如:
============伪代码=========
this.setState({
title1: 'updated title 1'
}, () => {
console.log(this.state.title2, 'titl2')
});
答案 2 :(得分:0)
此行为是预期的,因为setState是异步的。
从你的问题来看,我没有看到你为什么不能这样做的原因:
_toggleIsCollapsed = () => {
const { isBlocked } = this.state;
if (isBlocked) {
console.log('blocked');
}
this.setState(
prevState => ({ isCollapsed: !prevState.isCollapsed }),
() => {
console.log('isCollapsed: ' + this.state.isCollapsed);
console.log('done1');
console.log('done2'); // move this here
}
);
};
如果您希望该功能仅在更新状态(记录完成1)后才执行其他操作,则可以执行以下操作:
handleAfterStateChanged = () => {
// do more stuff here
// this will only be called after the state is updated
}
_toggleIsCollapsed = () => {
const { isBlocked } = this.state;
if (isBlocked) {
console.log('blocked');
}
this.setState(
prevState => ({ isCollapsed: !prevState.isCollapsed }),
() => {
console.log('isCollapsed: ' + this.state.isCollapsed);
console.log('done1');
this.handleAfterStateChanged();
}
);
};