84738
Question:
new in react here, don't know if it's right to do this on the setState callback like this?
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?
Answer1:Your question does not seem to follow the pattern of a regular react app. You should be using the lifecycle events to <em>react</em> to 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
<pre class="snippet-code-js lang-js prettyprint-override">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')
);
<pre class="snippet-code-html lang-html prettyprint-override"><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.
