navigation after AsyncStorage.setItem: _this3.navigateTo is not a function

Question

Currently, I am implementing a chat. After user pressed a chat button, the app will navigate the user to the Chat component. The chat content will simply store in firebase and chatId is needed to identify which chat belongs to the user.

Since I don't know how to pass props during navigation, I decided to save the CurrentChatId in AsyncStorage. After navigated to the Chat component, it will get the CurrentChatId from AsyncStorage so that I can map the chat content with the firebase.

However, I got the error _this3.navigateTo is not a function with code below:

let ref = FirebaseClient.database().ref('/Chat'); 
ref.orderByChild("chatId").equalTo(chatId).once("value", function(snapshot) {

    chatId = taskId + "_" + user1Id + "_" + user2Id;
    if (snapshot.val() == null) {
        ref.push({
            chatId: chatId,
            taskId: taskId,
            user1Id: user1Id,
            user2Id: user2Id,
        })
    }
    try {
        AsyncStorage.setItem("CurrentChatId", chatId).then(res => { 
            this.navigateTo('chat');
        });
    } catch (error) {
        console.log('AsyncStorage error: ' + error.message);
    }
}

The function navigateTo is copied from the demo app of NativeBase

import { actions } from 'react-native-navigation-redux-helpers';
import { closeDrawer } from './drawer';

const {
  replaceAt,
  popRoute,
  pushRoute,
} = actions;

export default function navigateTo(route, homeRoute) {
  return (dispatch, getState) => {
    const navigation = getState().cardNavigation;
    const currentRouteKey = navigation.routes[navigation.routes.length - 1].key;

    dispatch(closeDrawer());

    if (currentRouteKey !== homeRoute && route !== homeRoute) {
      dispatch(replaceAt(currentRouteKey, { key: route, index: 1 }, navigation.key));
    } else if (currentRouteKey !== homeRoute && route === homeRoute) {
      dispatch(popRoute(navigation.key));
    } else if (currentRouteKey === homeRoute && route !== homeRoute) {
      dispatch(pushRoute({ key: route, index: 1 }, navigation.key));
    }
  };
}

score 1 · Answer 1 · answered Apr 21 '17 at 16:16

1

You should bind this to the function that contains the try & catch. The best practice is to add this bind the constructor of the the component:

constructor(props) {
  super(props);
  this.myFunctoin = this.myfuction.bind(this);
}

answered Apr 21 '17 at 16:16

Meysam Izadmehr

3,103
17
25

I have tried to bind the function but it does not help. I have shown more code now. Does it related to the `function(snapshot) { ... }` thing? – ykn121 Apr 21 '17 at 16:30

score 0 · Answer 2 · answered Apr 21 '17 at 16:45

Finally, I solved the problem. It is really because this.navigateTo('chat'); is inside function(snapshot)

ref.orderByChild("chatId").equalTo(chatId).once("value", function(snapshot) {

    chatId = taskId + "_" + user1Id + "_" + user2Id;
    if (snapshot.val() == null) {
        ref.push({
            chatId: chatId,
            taskId: taskId,
            user1Id: user1Id,
            user2Id: user2Id,
        })
    }
}
try {
    AsyncStorage.setItem("CurrentChatId", chatId).then(res => { 
        this.navigateTo('chat');
    });
} catch (error) {
    console.log('AsyncStorage error: ' + error.message);
}

Take it out from the function will solve the problem.

navigation after AsyncStorage.setItem: _this3.navigateTo is not a function

2 Answers2