React Native中通过名称获取传递变量报错问题咨询

嘿，这是个非常典型的新手疑惑，我来给你讲明白其中的逻辑～

首先你得搞清楚**this.props的结构**：当你使用React Navigation时，导航框架会自动给你的屏幕组件传递一个名为navigation的props，这个navigation是一个包含了各种导航方法的对象，getParam就是这个对象上的方法之一。换句话说，你的this.props大概是这样的结构：

this.props = {
  navigation: {
    getParam: (paramName, defaultValue) => { /* 内部实现 */ },
    navigate: () => { /* 内部实现 */ },
    goBack: () => { /* 内部实现 */ },
    // 其他导航相关方法和属性
  },
  // 你自己传递的其他props（如果有的话）
}

接下来拆解两种写法的区别：

• 正确的写法：const { navigation } = this.props; const itemId = navigation.getParam('name', 'NO-ID');
  这里的const { navigation } = this.props是ES6的解构语法，相当于把this.props.navigation这个对象单独取出来，然后调用这个对象上的getParam方法，完全符合对象的结构，所以能正常拿到参数值。

• 错误的写法：const itemId = this.props.getParam('name', 'NO-ID');
  你直接在this.props上调用getParam，但getParam根本不是this.props的直接属性——它是嵌套在this.props.navigation里面的！所以this.props.getParam的值是undefined，调用一个undefined当作函数，自然就会抛出undefined is not a function的错误了。

如果不想用解构语法，正确的写法应该是直接访问嵌套的对象属性：

const itemId = this.props.navigation.getParam('name', 'NO-ID');

这样就能和原来的解构写法达到一样的效果啦～

内容的提问来源于stack exchange，提问作者Tianyun Ling