Can't perform a React state update on an unmounted component. when updating redux state - react native

Viewed 42

When i try to navigate while updating redux state in react native the warning appears, if i comment props.setLocation(selected_location); the warning disapear. i tried giving settimeout to the navigation so it work perfectly, but its not a good method right?, here is my code,

             <GooglePlacesAutocomplete
              placeholder="Enter your location"
              suppressDefaultStyles={true}
              enableHighAccuracyLocation={false}
              fetchDetails={true}
              onChangeText={handleChangeText}
              currentLocation={showCurrentLocation}
              nearbyPlacesAPI={'GoogleReverseGeocoding'}
              currentLocationLabel="Current location"
              enablePoweredByContainer={false}
              textInputProps={{
                ref: inputRef,
                value: pickedLocation,
                onChangeText: handleChangeText,
                clearButtonMode: 'never',
                style: styles.searchBox,
                placeholderTextColor: Colors.black1,
              }}
              
              onPress={(data, details = null) => {
                // 'details' is provided when fetchDetails = true
                const selected_location = {
                  latitude: details.geometry.location.lat,
                  longitude: details.geometry.location.lng,
                  name: details.formatted_address,
                };
                saveLocationToStorage(selected_location);
                 props.setLocation(selected_location);
                setLocationUnavailable(false);
                setPickedLocation(selected_location.name);
                setTimeout(() => {
                  navigation.dispatch(
                    CommonActions.reset({
                      index: 0,
                      routes: [{ name: 'Home' }],
                    }),
                  );
                }, 500);
              }}
              onFail={() => {
                Alert.alert('Something went wrong');
              }}
              query={{
                key: Constants.GOOGLE_MAP_KEY,
                language: 'en',
              }}
            />
1 Answers

safeLocationToStorage seems to be an asynchronous function, you need to await it and then continue with the rest of your code. If you wrote the function yourself and it's not asynchronous yet you would need to make it. If you don't know how that works provide the code for the safeLocationToStorage function.

Related