通过导航传递状态时，this.props.navigation.state是未定义的吗？

Question

When I try to pass parameters through my navigation. I can't seem to acces them. They keep on beeing undefined when I try to use them.

This is how I pass them:

this.props.navigation.navigate('gamescreen',{gameDTO:message.body})

This is how I try to use them:

renderChat() {
    console.log(this.props.navigation.state.params.gameDTO.gameId)
    return <Chat token={this.state.token} id={this.props.navigation.state.params.gameDTO.gameId}
                         name={this.state.username}/>
}

It keeps giving me TypeError: undefined is not an object (evaluating 'this.props.navigation.state') when I acces it.

However in my console.log, it is not undefined and just shows the right String. Any ideas what I am doing wrong? I'm fairly new to React Native.

Answer 1

As you can see, this is TypeError. this.props.navigation doesn't have state object, which means undefined object. Please refer to this link. enter link description here

Answer 2

The renderChat() method must be declared in your component's constructor otherwise it will not have access to this .

constructor(props){
 super(props)
 this.renderChat = this.renderChat.bind(this)
}

renderChat(){
   this.props.navigation.getParam('gameDTO', 'default') //returns id
}

Another solution is convert renderChat() into an arrow function

renderChat = () => {
    this.props.navigation.getParam('gameDTO', 'default') //returns id
}

Answer 3

The problem was with the import of the chat component, that's why it could never recognize the navigation state. All the statements in this thread work fine for passing parameters through navigation. I just tab completed my Chat component and Webstorm didn't import the component from it's location, but imported it from a different screen I was using the component in.