TypeError： undefined 不是对象(评估 '_this3props.navigation.state.params')

Question

我正试图用react native expo构建一个聊天应用程序，但我在收件箱页面中收到了这个错误，我还放了我的聊天页面(这是我试图导航的(请帮帮我！我还放了仪表板屏幕我没有route.js文件。

"TypeError:undefined不是对象(正在评估'_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})}

希望这能有所帮助！