React-native: Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the xxxxxxxxx component.

Created on 9 Aug 2017  路  7Comments  路  Source: facebook/react-native

Is this a bug report?

YES
(write your answer here)

Have you read the Contributing Guidelines?

(Write your answer here.)

Environment

  1. react-native -v: 0.46.4
  2. node -v: 6.9.5
  3. npm -v: 5.3.0
  4. yarn --version:

Then, specify:

  • Target Platform: IOS, Android

  • Development Operating System: Mac and Windows

  • Build tools:

Steps to Reproduce

(Write your steps here:)

  1. My app make calls to a server using API. If i don't wait to mount all the response from server i get this wornings "Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the xxxxx component.". I remouve all the setState() in the component, and if i have only one setState() and is not execute and i press BACK i get the error above and my ui trasitions is veri bad.
    2.
    3.

Expected Behavior

(Write what you thought would happen.)
Not all to run setState() in unmounted component.

Actual Behavior

(Write what happened. Add screenshots!)
The setState() is runing if the component is not active.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Stale

All 7 comments

Can you provide a https://snack.expo.io/ reproducing this issue?

This doesn't sound like a bug to me, and more sounds like your component is calling setState after it has been unmounted, as the warning clearly states. You should double check your own code and ensure this isn't happening.

I believe is i bug, i have only one setState in my component, but if this setState in not reached until i press back button and the component is unmounted. How not to allow to run setState if i'm not in the component. If the component is unmounted in believe setState must not run. For example i have i ActivityIndicator, and a initial state loading: true, to show this ActivityIndicator, i pass some value to this component , and add this value to a ListView using setState to add to dataSource, loading: false. Let suppose this process takes 2 seconds until the ActivityIndicator is dismissed and my data is visible. But if the user press back button before, let say 1 second i get the error.
Sorry for may English.

Actually this sounds like simply an error in your code. I would do some more due diligence before following this issue up further. Unless you can provide a https://snack.expo.io/ and some sample code, there isn't much else I can do. Otherwise, you can try posting to stackoverflow. This isn't a issue with react-native in any case, and would be a bug with react, if it were a bug.

componentWillUnmount may help you clean up your component to avoid that warning.

While this is technically a shortcoming in the component, React Native really should take care of this in the spirit of automatic garbage collection.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

I am getting this error in the following situation. Running rails for back end API. React on the front. Set up user registration and authentication. This was VERY complicated and difficult because here is what happens. At user login the server - Rails - set the userid to the cookie. But then it will redirect away from the user login ""page" or view or component - or whatever - and so the cookie in the browser gets deleted. Therefore we created a "sudo" or "clone" browser history with react-router - code in the POST to create user session is this:

this.props.history.push('/demos', this.state)

But this creates some serious difficulties setting states around all the components. Is there some easy way to store the user ID until they click logout? It cannot be as hard this.

Getting the same error
`export class getpara_iosbs extends Component {

constructor(props){
super(props);
this.state ={
myData:"",
finalText:"",
}
this.getData = this.getData.bind(this);
this.replaceText = this.replaceText.bind(this);
this.updateText = this.updateText.bind(this);

}

getData(){

var parseString = require('react-native-xml2js').parseString;
var self = this;
    fetch(url)
      .then((response) => response.text())
       .then((response) => {
                        {this.replaceText(response)}

       })
       .catch((error) => {
       alert(error);
       });



  }

replaceText(res){
var tmp = res.split(">").join(">\n")
.split("\ .split("\<\/Add\>").join("\n")

{this.updateText(tmp)}

}

updateText(tmp1){
this.setState({

finalText:tmp1,

})
}

render() {
    return (


{this.getData()}
style={{borderColor: 'gray', borderWidth: 1}}
value={this.state.finalText}
multiline={true}
editable={false}
/>

)
}
};

`

Was this page helpful?
0 / 5 - 0 ratings