TypeError：未定义不是一个对象（评估'_this3props.navigation.state.params'）

Question

我正在尝试使用 react-native expo 构建一个聊天应用程序，我在收件箱页面中收到此错误我还放置了我的聊天页面（这是我想要导航的内容） 请帮我！ 我也把我的仪表板屏幕 我没有 route.js 文件。

"TypeError: undefined is not an object (evalating '_this3props.navigation.state.params')"

        export default class  GelenKutusu extends React.Component {
            state={
                userList:[]
            }
            componentWillMount(){
                firebase.database().ref().child('users').once('value',(snap)=>{
                    let userList=[]
                    snap.forEach((user)=>{
                        const {first_name,profile_picture,uid}=user.val()
                        userList.push({first_name,profile_picture,uid})
                })
                this.setState({userList})
            })
        }
            render() {
              return (
                              <View style={styles.container}>
                        <View style={{alignItems:'center',justifyContent:'center',width:width-40,paddingBottom:10}}>
                            <Text style={{color:'grey',fontWeight:'bold',fontSize:18}}>Inbox</Text>
                        </View>
                        <FlatList
                        data={this.state.userList}
                        keyExtractor={(item,index)=>item.first_name}
                        renderItem={({item})=>
                        <TouchableOpacity onPress={()=> this.props.navigation.navigate('Chat',{user:this.props.navigation.state.params.user, profile:item})} >
                            <View style={{flex:1,backgroundColor:'transparent', flexDirection: 'row', padding:5, width:width}}>
                           <Image style={{height:40, width:40,borderRadius:20}}
                              source={{ uri: item.profile_picture  }} />
                              <View style={{alignItems:'center',justifyContent:'center'}}>
                                 <Text style={{color:'grey', fontWeight:'bold'}}>{item.first_name}</Text>
                              </View>
                              </View>
                              <View style={{width:width, height:1,backgroundColor:'darkgrey'}} />
                              </TouchableOpacity>
                        } />
                    </View>
                );
            }
        } 


Here is chat.js


    export default class chat extends Component{
        state={
            messages:[],
            user:this.props.navigation.state.params.user,
            profile:this.props.navigation.state.params.profile
        }
        componentWillMount(){
            const {user,profile}=this.state
            this.chatID= user.uid > profile.uid? user.uid+'-'+profile.uid:profile.uid+'-'+user.uid
            this.watchChat()
        }
        watchChat=()=>{        firebase.database().ref('messages').child(this.chatID).on('value',snap=>{
                let messages=[]
                snap.forEach(messages=>{
                    messages.push(messages.val())
                })
                messages.reverse()
                this.setState({messages})
            })
        }
        onSend=(messages)=>{
            const {user,profile}=this.state
            relationMessage={}    firebase.database().ref('messages').child(this.chatID).push({...message[0],createdAt:new Date().getTime(),
            })
        }
        render(){
            const {user,profile}=this.state
            const avatar = user.profile_picture
            return(
                <View style={{flex:1}}>
                  <GiftedChat
                    messages={this.state.messages}
                    user={{_id:user.uid,avatar}}
                    onSend={this.onSend()}
                    />
                    </View>
            )
        }
    }




Here is my Dashboard.js screen 


class  DashboardScreen extends Component {

    render(){
        return (

          <NavigationContainer> 

          <Stack.Navigator
         screenOptions={{
           gestureEnabled: true,
           gestureDirection: "horizontal",

           // transitionSpec: {
             // open: config,
             // close: closeConfig
             // }
         }}
         headerMode="float"
         animmation="fade" >
           <Stack.Screen options={{
          headerRight: () => (

            <Ionicons name="ios-search" size={38}  
            style={{ margin: 5, padding: 5}}
            onPress={() => alert('This is a button!')}
            />

          ),
          headerLeft: () => (
            <Ionicons name="ios-add" size={48}  
            style={{ margin: 5, padding: 5}}
            onPress={() => alert('This is a button!')}
            />
          ),
        }} name = "                 "
           component={MyTabs} />
           <Stack.Screen  name="Header" component={MyTabsTop}  />
         </Stack.Navigator>

            </NavigationContainer>

        );
    }
}

export default DashboardScreen;

const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName ='ios-home'
        } 
        else if (route.name === 'Bildirimler') {
          iconName ='ios-notifications'
        }
        else if (route.name === 'GelenKutusu') {
          iconName ='ios-chatboxes'
        }
        else if (route.name === 'Profil') {
          iconName ='ios-contact'
        }

        // You can return any component that you like here!
        return <Ionicons name={iconName} size={size} color={color} />
      }
    })} >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Bildirimler" component={Bildirimler} />
      <Tab.Screen name="GelenKutusu" component={GelenKutusu} />
      <Tab.Screen name="Profil" component={Profil} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();
function MyTabsTop() {
    return (
        <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={Profil}
          options={{ title: 'My home' }}
        />
      </Tab.Navigator>
    );
  }

这是上下文。

Answer 1

问题来了

onPress={()=> this.props.navigation.navigate('Chat',{user:this.props.navigation.state.params.user, profile:item})}

您正在传递从另一个组件获取的参数。

首先像这样在渲染中获取参数：

 render() {
    /Read the params from the navigation state */
    const { params } = this.props.navigation.state;
    const user= params ? params.user: null;

在这里您将获得用户参数并在导航中使用

       onPress={()=> this.props.navigation.navigate('Chat',{user:user, profile:item})}

希望这会有所帮助！