First I apologize for my english. I have been working on react native applications for 4 months. But sometimes I get this error and don't mind.
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 %s.%s, the componentWillUnmount method,in CustomerDetailScreen (at SceneView.tsx:123)
This is because when I click the button, I open a screen and when the screen is not fully loaded I press the back button. How can I resolve this warning? I'll show you some sample code examples.
I hope I could explain. Can you help me with this topic? I want to fully understand the logic. I've read something called AbortController in some articles but I don't know exactly.
constructor(props) { super(props); this._isMounted = false; this.state = { id: props.route.params.id, username: '', token: null, cityId: 1, townId: 1, cityData: [], townData: [], selectedIndex: 0, selectedCity: new IndexPath(0), selectedTown: new IndexPath(0), }}componentDidMount() { this._isMounted = true; this._isMounted && this._getToken();}componentWillUnmount() { this._isMounted = false;}_getToken = async () => { try { const username = await AsyncStorage.getItem('username'); const token = await AsyncStorage.getItem('token'); if(token === null) { await AsyncStorage.removeItem('token'); }else { this.setState({ username: username, token: token }); this._isMounted && this.loadCustomerDetail(); } } catch (error) { console.log(error); }};loadCustomerDetail() { try { const { username, token } = this.state; if(token) { const { id } = this.state; var credentials = Base64.btoa(username +':'+ token); var URL = `https://portal.xxxxxx.com/api/v1/Customer/${id}`; axios.get(URL, {headers : { 'Espo-Authorization' : credentials }}) .then(this.dataSuccess.bind(this)) .catch(this.dataFail.bind(this)); } }catch (err) { console.log(err); }};dataSuccess(response) { this.setState({ isLoading: false, cityId: response.data.cityId, townId: response.data.townId }, () => { this.getCities(); });}getCities() { const { username, token, cityId } = this.state; let credentials = Base64.btoa(username +':'+ token); axios.get('https://portal.xxxxx.com/api/v1/Cities', { headers : { 'Espo-Authorization' : credentials }}) .then((response) => { response.data.list.sort(function(a, b) { return Number(a.id) > Number(b.id); }); this.setState({cityData: response.data.list}, () => { this.setState({ selectedCity: new IndexPath(this.state.cityData[cityId-1].id - 1) }); this.getTowns(this.state.cityData[cityId-1].id); }); }).catch((error) => { console.log(error); });}getTowns(cityId) { this.setState({ townLoading: true }); const { username, token } = this.state; let credentials = Base64.btoa(username +':'+ token); axios.get(`https://portal.xxxxx.com/api/v1/Towns/action/TownList?cityId=${cityId}`, { headers : { 'Espo-Authorization' : credentials }}) .then((response) => { this.setState({ townData: response.data, townLoading: false }, () => { for (const [key, value] of Object.entries(this.state.townData)) { if(value.id === this.state.townId) { this.setState({ selectedTown: new IndexPath(key) }) } } }); }).catch((error) => { console.log(error); });}