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

Question

I am trying to access props passed to a react native component but it seems that props are not received by the component. The component which passes 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>
);

}

The component which receives 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!");
  }
});

}

This throws a syntax error: JSON Parse Error: Unexpected identifier "undefined" When I console log navigation.state it returns that params are undefined

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

Is there anything that I'm doing wrong here? Any fixes?

Answer 1

If you used react-navigation, try this for accessing navigation params

 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!");
      }
    }); 
 }

And refer this similar issue https://stackoverflow.com/questions/58279318/navigation-getparam-in-not-an-object/58280498#58280498

Answer 2

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

In above line, you have set a navigation parameter called hireId which is an integer

const { navigation } = this.props

navigation.getParam('hireId')

navigation.getParam('hireId') will returns you an integer value

But in another script you convert that integer to JSON by JSON.parse(navigation.getParam('hireId'))

this will throw you an error

Try remove the JSON.parse as it is a integer already that you want