On my screen, I have an input field that looks like this:
export const FavouritePointInput: React.FunctionComponent<FavouritePointInputProps> = ({ getMyLocationCoordinates, textChangeHandler, handleFocus, favouritePoint,}) => { return (<Item style={styles.searchField}><TouchableOpacity onPress={getMyLocationCoordinates}><Icon name="search" style={styles.searchIconStyles} /></TouchableOpacity><Input onFocus={() => { handleFocus('favouritePoint'); }} onChangeText={(text) => textChangeHandler('favouritePoint', text)} style={styles.searchText} value={favouritePoint} /></Item> );};
When I click on the back button on my screen, I use these custom hooks:
const resetLocation = useResetLocation();onPress={() => { navigation.goBack(); resetLocation('favouriteLocation'); }}>
to resetLocation
This is how the hook looks like:
export const useResetLocation = () => { const setLocationForPoint = useSetLocationForPoint(); const resetLocation = (fieldName: string) => { let setAddressAction; if (fieldName === 'startingPoint') { setAddressAction = getSetStartPointAction({ coordinates: [], street: '', }); } else { console.log('fieldname', fieldName); setAddressAction = getSetFavouritePointAction({ coordinates: [], street: '', }); } setLocationForPoint(setAddressAction); };
export const getSetFavouritePointAction = (favouritePoint: { coordinates: number[]; street: string;}) => { console.log('getSetFavouritePointAction FAV POINT', favouritePoint) return { type: LOCATIONS.SET_FAVOURITE_POINT, payload: favouritePoint, };};
Whenever I go back, I see the console logs and this console.log('getSetFavouritePointAction FAV POINT', favouritePoint)
returns an empty object. However, when I go back to the screen, the word is still written in the input field. The same method is working somewhere else but not here so might be a minor mistake.
Upon going back, I also see logs from here. The state becomes empty when I go back. However, the input field still doesn't become empty.
export default (state = INITIAL_STATE, action) => { switch (action.type) { case LOCATIONS.SET_END_POINT: return { ...state, endPoint: action.payload }; case LOCATIONS.SET_STARTING_POINT: return { ...state, startingPoint: action.payload }; case LOCATIONS.SET_FAVOURITE_POINT: console.log('FAVOURITE_POINT'); console.log('state', action.payload ) return { ...state, favouritePoint: action.payload }; default: return state; }};