this.setState not updating immediately, when basing setState on current state
Date : March 29 2020, 07:55 AM
I wish this helpful for you I wrote a few test cases, turns out the problem was elsewhere. I was using this switch-case to render different data. React Native has a feature which prevents unwanted rerendering if the data is similar to the previous data. Apparently this includes reversing and sorting the original data array. So I returned a new data array with [].concat() and it worked.
|
I have one this.state and i need pass in my componentDidMount with setState, how use bind(this) in setState?
Date : March 29 2020, 07:55 AM
I hope this helps you . I have that pass Bind in setState, how to do? enter image description here , You can resolve setState undefined issue in two ways componentDidMount() {
this.database.once("value", snapshot => {
snapshot.forEach(data => {
this.setState({users: data.val()})
})
});
}
componentDidMount() {
this.database.once("value", function(snapshot) {
snapshot.forEach(function(data) {
this.setState({users: data.val()})
}.bind(this)}
}.bind(this));
}
|
setState(): Do not mutate state directly. Use setState()
Date : March 29 2020, 07:55 AM
will help you 1- Don't mutate state directly use setState for that, so remove the first two lines. 2- Because setState is async and you are updating the state based on previous value, so use updater function, means pass a function in setState and use prevState value in that function. updateDelay(prediction_arr,prediction_dep) {
this.setState(prevState => ({
prediction_arr: prediction_arr,
prediction_dep: prediction_dep,
delay_arr_cat: prediction_arr===0 ? "<15" : (prediction_arr===1 ? "[15; 45]" : ">45"),
chartDataWake: [
...prevState.chartDataWake,
{wake: prevState.wake===84.73 ? "H" : (prevState.wake===14.78 ? "M" : "L"), delay: prediction_arr}
],
chartDataTurnaround: [
...prevState.chartDataTurnaround,
{turnaround: prevState.schedTurnd, delay: prediction_arr}
]
}));
};
|
Why do I need to use setState callback to set state for second state item that relies on first item's setState finishing
Date : March 29 2020, 07:55 AM
it should still fix some issue It's not that setState is asynchronous, it's a result of randomQuoteIndex being called before the state is set. This would be the case with or without asynchronous updating of state. Consider this slightly refactored version of componentDidMount: componentDidMount() {
fetch('https://gist.githubusercontent.com/nataliecardot/0ca0878d2f0c4210e2ed87a5f6947ec7/raw/1802a693d02ea086817e46a42413c0df4c077e3b/quotes.json')
.then(response => response.json())
.then(quotes => {
const newState = {
randomQuoteIndex: this.randomQuoteIndex(),
isDoneFetching: true,
quotes
}
this.setState(newState)
})
}
componentDidMount() {
fetch('https://gist.githubusercontent.com/nataliecardot/0ca0878d2f0c4210e2ed87a5f6947ec7/raw/1802a693d02ea086817e46a42413c0df4c077e3b/quotes.json')
.then(response => response.json())
.then(quotes => this.setState({
quotes,
randomQuoteIndex: this.randomQuoteIndex(quotes),
isDoneFetching: true
}));
}
randomQuoteIndex(quotes) {
return random(0, quotes.length - 1);
}
|
Prevent using this.state within a this.setState (react/no-access-state-in-setstate)
Date : March 29 2020, 07:55 AM
I wish did fix the issue. to @jonrsharpe for pointing me to appropriate documentation. It turns out that state updates may be asynchronous. React may batch multiple setState() calls into a single update for performance. In the came of my code, I only have one value that was being updated. But, it's still a good idea to use a second form of setState that accepts a function rather then an object. toggleDark = () => {
const dark = !this.state.dark
localStorage.setItem('dark', JSON.stringify(dark))
this.setState(({ dark }) => ({ dark: !dark }))
}
|
Boards Message :
Related QUESTIONS :
