0

I have a function that sends register data to an endpoint

So I make a loading when user press sign-up button,

but this loading does not appear any more!

and i got a Warning

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

I try tow different way to setState 'loading'

1) set state loading in the first line of my function then call my API.

this.setState({loading:true});
API.post(....);

2) make API calling int the callback function when setState loading as in the Below code snippet

but no one works :\

but sadly not works

signUp = data => {
    this.setState({loading: true}, () => {
      API.post('/register', data)
        .then(async response => {
          let {
            data: {
              data: {
                response: {token},
              },
            },
          } = response;
          console.log(token);
          this.props.dispatch(isLoginFunc(true));
          await saveToken('id_token', token);
          this.setState({loading: false}, () =>
            this.props.navigation.navigate('TabHome'),
          );
        })
        .catch(this.setState({loading: false}));
    });
  };

Calling signUp()

 <Formik
              validationSchema={formSchema}
              initialValues={initialValues}
              onSubmit={(values, actions) => {
                this.signUp(values);
                actions.resetForm();
              }}>
....
</Formik>
Oliver D
  • 2,579
  • 6
  • 37
  • 80
  • Does this answer your question? [how to remove the warning "can't perform a react state update on unMounted Component"](https://stackoverflow.com/questions/53991044/how-to-remove-the-warning-cant-perform-a-react-state-update-on-unmounted-compo) – Roberto Zvjerković Feb 18 '20 at 14:04
  • @ritaj No! I don't use componentDidMount() in this screen – Oliver D Feb 18 '20 at 14:11
  • Assuming you're using classes. Did you bind your `data` function to your class? – Nick Rameau Feb 18 '20 at 14:35
  • @NickRameau Sorry, I couldn't understand you well, can you explain more? – Oliver D Feb 18 '20 at 14:56
  • Please do some research on binding methods to classes in React. – Nick Rameau Feb 18 '20 at 15:01
  • @NickRameau Yeah I got it from [here](https://stackoverflow.com/questions/50297676/react-binding-this-to-a-class-method), yes i use Binding in render OR arrow – Oliver D Feb 18 '20 at 16:15
  • @NickRameau Please, check my question again! – Oliver D Feb 18 '20 at 16:17
  • You need to check if the component is still mounted when you call `setState` – Roberto Zvjerković Feb 18 '20 at 16:18
  • Which component? and why i check it if i don't use componentDidMount life cycle @ritaj – Oliver D Feb 18 '20 at 16:24
  • It's weird, if this function only gets triggered once the user presses the Signup button, I don't think your leak is coming from there. It could be another function. Also, are you sure you're not calling `signUp` somewhere else? – Nick Rameau Feb 18 '20 at 16:44
  • No, I don't call it in Elsewhere, And i don't setState in other function except `signUp` @NickRameau – Oliver D Feb 18 '20 at 16:53
  • Oh, okay. I think it's coming from the Formik `resetForm` method. You're calling it after your `signUp` method, which will navigate away on success. So the `resetForm` method doesn't have anything to reset anymore. I recommend you add this `resetForm` call inside `signUp`. – Nick Rameau Feb 18 '20 at 16:59
  • But you really don't need this if it's a success, so, just add it to the `catch`. – Nick Rameau Feb 18 '20 at 16:59
  • Great which way it's good to send the request to API? 1 || 2? cuz no one of them can appear my loading indicator haha :) – Oliver D Feb 18 '20 at 17:14
  • @NickRameau OH, In `.catch(this.setState({loading: false}));` as you see I make it in wrong way right? after change it to `.catch((err)=>console.log(err),this.setState({loading: false}));` it's work fine :DD – Oliver D Feb 18 '20 at 17:24
  • 1
    I'm glad you figured it out. – Nick Rameau Feb 18 '20 at 18:50

0 Answers0