收到的道具在本机导航中未定义

Question

我正在尝试访问传递给本机组件的道具，但该组件似乎未收到道具。传递 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>);}接收道具的组件（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" When I console log navigation.state 它返回该参数未定义Object {  "key": "PastHireDetails",  "params": undefined,  "routeName": "PastHireDetails",}我在这里做错了什么吗？任何修复？

Answer 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

Answer 2

this.props.navigation.navigate('PastHireDetails', {

                hireId: 12,

              })

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

const { navigation } = this.props

navigation.getParam('hireId')

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

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

这会给你一个错误

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