javascript 如何在 setState 之后通过 setTimeout 立即更改反应状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46164460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a react state immediately by setTimeout after setState?
提问by gpbaculio
new in react here, don't know if it's right to do this on the setState callback like this?
在这里反应新，不知道像这样在 setState 回调上这样做是否正确？
setTimeout(()=> {
this.setState((state, props) => ({ activateLightColorForRed: true }), () => {
setTimeout(()=> {
this.setState(()=> ({ activateLightColorForRed: false }))
}, 500);
red.play();
})
}, toWait);
or maybe something like this?
或者像这样的东西？
this.setState((state, props) => {
this.setState((state, props) => {
activateLightColorForRed: true
});
setTimeout(() => { activateLightColorForRed: false },500)
})
are the state on the setState callback updated? something weird is happening in my components, it's rendering multiple times. I am not sure but I think it's because I'm doing the first sample?
setState 回调的状态是否更新？我的组件中发生了一些奇怪的事情，它渲染了多次。我不确定，但我认为这是因为我在做第一个样本？
回答by S.Kiers
Your question does not seem to follow the pattern of a regular react app. You should be using the lifecycle events to reactto the state being changed. You should not be making multiple, nested, confusing callbacks (like it seems you want to do).
您的问题似乎不符合常规反应应用程序的模式。您应该使用生命周期事件对正在更改的状态做出反应。您不应该进行多个、嵌套的、令人困惑的回调（就像您想做的那样）。
Might I suggest a structure more like this
我可以建议一个更像这样的结构吗
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
activateLightColorForRed: false,
};
}
componentDidUpdate(prevProps, prevState) {
if (this.state.activateLightColorForRed) {
// when the state is updated (turned red),
// a timeout is triggered to switch it back off
this.turnOffRedTimeout = setTimeout(() => {
this.setState(() => ({activateLightColorForRed: false}))
}, 500);
}
}
componentWillUnmount() {
// we set the timeout to this.turnOffRedTimeout so that we can
// clean it up when the component is unmounted.
// otherwise you could get your app trying to modify the state on an
// unmounted component, which will throw an error
clearTimeout(this.turnOffRedTimeout);
}
render () {
// really simply ui to show how it *could* work
return (
<div onClick={this.turnLightRed}>
The light is {this.state.activateLightColorForRed ? "Red" : "Green"}.
<br /> Click to change!
</div>
)
}
turnLightRed = () => {
// this function will turn the light red
this.setState(() => ({
activateLightColorForRed: true
}));
}
}
ReactDOM.render(
<Foo name="World" />,
document.getElementById('container')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="container"></div>Hope that helps.
希望有帮助。
