收到的道具在反应本机导航中未定义答案

【问题标题】：Props received are undefined in react native navigation收到的道具在反应本机导航中未定义
【发布时间】：2019-10-18 20:23:46
【问题描述】：

我正在尝试访问传递给 react 本机组件的道具，但该组件似乎没有收到道具。传递 props(PastHires.js) 的组件：

return (
  <ScrollView style={styles.container}>
    <Text style={styles.heading}>Past Hires</Text>
      {
        this.state.boards.filter(item => item.driverId === this.props.user.id && item.hireStatus === 'completed' ).map((item, i) => (
          <ListItem
            style={styles.listItem}
            key={i}
            title={item.pickupDatetime + '  ' + item.hireType.toUpperCase() + '  ' + item.pickupLocation.toUpperCase()}
            leftIcon={{name: 'book', type: 'font-awesome'}}
            onPress={() => {
              this.props.navigation.navigate('PastHireDetails', {
                hireId: 12,
              });
            }}
          />
        ))
      }
  </ScrollView>
);

}

接收props的组件（PastHireDetails.js）：

componentDidMount() {
const { navigation } = this.props;
// console.log(navigation.state)
const ref = Firebase.firestore().collection('hires').doc(JSON.parse(navigation.getParam('hireId')));
ref.get().then((doc) => {
  if (doc.exists) {
    this.setState({
      hire: doc.data(),
      key: doc.id,
      isLoading: false
    });
  } else {
    console.log("No such document!");
  }
});

}

这会引发语法错误：JSON Parse Error: Unexpected identifier "undefined" 当我控制台日志 navigation.state 它返回参数未定义

Object {
  "key": "PastHireDetails",
  "params": undefined,
  "routeName": "PastHireDetails",
}

我在这里做错了什么吗？有什么修复吗？

【问题讨论】：

检查 PastHires.js 是否可以在您的导航器中看到 PastHireDetails.js，例如 export default stackNavigator = createStackNavigator( { PastHires, PastHireDetails },
@mmelotti 在 pastHires.js 中应该有一个堆栈导航器吗？我所有的导航屏幕都在堆栈导航器中

标签： javascript react-native expo react-native-navigation

【解决方案1】：

如果你使用 react-navigation，试试这个来访问导航参数

 componentDidMount() {
    const { navigation } = this.props;
    // console.log(navigation.state);
    const hireId = navigation.state.params.hireId;
    const ref = Firebase.firestore().collection('hires').doc(hireId);
    ref.get().then((doc) => {
      if (doc.exists) {
        this.setState({
          hire: doc.data(),
          key: doc.id,
          isLoading: false
        });
      } else {
        console.log("No such document!");
      }
    }); 
 }

并参考这个类似的问题 https://stackoverflow.com/questions/58279318/navigation-getparam-in-not-an-object/58280498#58280498

【讨论】：

【解决方案2】：

this.props.navigation.navigate('PastHireDetails', {
                hireId: 12,
              })

在上面一行中，您设置了一个名为hireId 的导航参数，它是一个整数

const { navigation } = this.props

navigation.getParam('hireId')

navigation.getParam('hireId') 将返回一个整数值

但在另一个脚本中，您通过以下方式将该整数转换为 JSON JSON.parse(navigation.getParam('hireId'))

这会给你一个错误

尝试删除 JSON.parse，因为它已经是您想要的整数

【讨论】：