无法访问 props.navigation.state 变量

Question

I got undefined errors when I try to saving props.navigation.state variables into state and using them on components

  componentDidMount = () => {
    this.setState({
      services: this.props.navigation.state.params.data.vendor_types_and_services,
      loading: false
    })
  }

then when I display the data it crash with error

  {!loading &&  <Text>{services.length}</Text>}

undefined is not an object (evaluating 'services.length')

When using the regular expression this.props.navigation.state.params.data.vendor_types_and_services it works just fine, I am not sure where is the problem, this is a different route on appNavigator, what's the alternative to componentWillReceiveProps or componentWillMount ?

Please help!

Answer 1

Replace

{!loading &&  <Text>{services.length}</Text>}

With

{!loading && this.state.services !== null &&  <Text>{this.state.services.length}</Text>}

And make sure you have defined this state variable into constructor like this:

constructor(props) {
  super(props);
  this.state = {
    services: null,
    loading: true
  };
}

Answer 2

try destructuring and debug with a console.log()

const { params } = props.navigation.state;

can you show how you receive these props from another component?