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 ponents, it's rendering multiple times. I am not sure but I think it's because I'm doing the first sample?
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 ponents, it's rendering multiple times. I am not sure but I think it's because I'm doing the first sample?
Share Improve this question asked Sep 11, 2017 at 21:13 gpbaculiogpbaculio 5,96814 gold badges68 silver badges112 bronze badges 2- 1 could you post the full code for the ponent? Are you calling setState from within the render method? – James Gentes Commented Sep 11, 2017 at 22:26
-
1
Heads-up @i-am-newbie :
setStateare asynchronous in nature and you could also use simplythis.setState({activateLightColorForRed:true})i.e. pass a object instead of passing in a function. Might help in readability. And yeah post the plete code for the ponent. It will help us. Thanks – KeshavDulal Commented Sep 12, 2017 at 3:23
1 Answer
Reset to default 12Your question does not seem to follow the pattern of a regular react app. You should be using the lifecycle events to react 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
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
activateLightColorForRed: false,
};
}
ponentDidUpdate(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);
}
}
ponentWillUnmount() {
// we set the timeout to this.turnOffRedTimeout so that we can
// clean it up when the ponent is unmounted.
// otherwise you could get your app trying to modify the state on an
// unmounted ponent, 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./ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="container"></div>Hope that helps.