Can't perform a React state update on an unmounted component with react-intl-tel-input component

user_15366094 0
Viewed 191

I have a functional component called signup in which I am using react-intl-tel-input for mobile number field. There is only one async axios request which is happening on submitting the form. But still I am getting this warning

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 the componentWillUnmount method.

I want to remove this warning but so far I tried several solutions provided on Stackoverflow does not work. After debugging I found out the warning is generating from <IntlTelInput /> field from react-intl-tel-input. Please help me out to remove this warning.

Code example:

import React, {useState} from "react";
import IntlTelInput from "react-intl-tel-input";
import axios from "axios";

function Signup() {

const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [mobile, setMobile] = useState("");

const handleSubmit = async (e) => {
  const signupData = { email, password, mobile};

  const response = await axios.post(/url, signupData);
}

return (
<form onSubmit={handleSubmit}>
<input name="email" type="text" onChange={e => setEmail(e.target.value)} />
<input name="password" type="password" onChange={e => setPassword(e.target.value)} />
<IntlTelInput
                        containerClassName="intl-tel-input"
                        inputClassName="form-control w-100"
                        autoPlaceholder
                        separateDialCode
                        defaultCountry="za"
                        name="mobile"
                        numberType="MOBILE"
                        fieldId="mobile_number"
                        onPhoneNumberChange={(validate, value, countryData) =>
                         setMobile(value)
                        }
                        formatOnInit={false}
                        autoComplete="new-phone"
                      />
<button type="submit">Signup</button>
);

export default Signup;
reactjs warnings
1 Answers

In your handleSubmit function, try adding e.preventDefault() at the top. Form components will, by default, attempt to submit the form back to your server when the submit button is clicked, which would cause the page to refresh and your component to unmount. e.preventDefault() should prevent it from attempting to submit in the first place.

Example

import React, {useState} from "react";
import IntlTelInput from "react-intl-tel-input";
import axios from "axios";

function Signup() {

const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [mobile, setMobile] = useState("");

const handleSubmit = async (e) => {
  e.preventDefault();
  const signupData = { email, password, mobile};
  const response = await axios.post(/url, signupData);
}

return (
<form onSubmit={handleSubmit}>
<input name="email" type="text" onChange={e => setEmail(e.target.value)} />
<input name="password" type="password" onChange={e => setPassword(e.target.value)} />
<IntlTelInput
                        containerClassName="intl-tel-input"
                        inputClassName="form-control w-100"
                        autoPlaceholder
                        separateDialCode
                        defaultCountry="za"
                        name="mobile"
                        numberType="MOBILE"
                        fieldId="mobile_number"
                        onPhoneNumberChange={(validate, value, countryData) =>
                         setMobile(value)
                        }
                        formatOnInit={false}
                        autoComplete="new-phone"
                      />
<button type="submit">Signup</button>
</form>
);

export default Signup;

Edit: Also it looks like you didn't add a closing form tag, so I just added that in the code above.

user_81738290
Related