React Native props直接访问正常但解构后为undefined问题求助

直接给出排查方向和对应解决方法：

• 类组件漏写this前缀
  如果你使用的是Class类组件，所有props都挂载在组件实例的this对象上，直接读取props变量属于未定义变量，自然解构结果为undefined。
  正确写法：

  const { customFields, onEdit, edit } = this.props
  

• 函数组件未正确接收props参数
  检查你的组件定义是否未将props作为入参传入，错误写法示例：

  // 错误：未声明props入参
  const TypeRadio = () => {
    const { customFields } = props
  }
  

  修正为以下任意一种写法即可：

  // 写法1：先接收props再解构
  const TypeRadio = (props) => {
    const { customFields } = props
  }
  // 写法2：入参位置直接解构
  const TypeRadio = ({ customFields, onEdit, edit }) => {
    // 直接使用解构后的变量即可
  }
  

• 解构时机早于props赋值完成
  如果你在组件初始化阶段（比如依赖为空的useEffect回调、异步逻辑）提前解构props，此时上层组件可能还未完成props传递，会拿到初始undefined。而你直接写props.customFields.current时，代码运行时机已在props更新完成后，因此可以正常取值。
  解决方法：将解构操作放在对应逻辑块内部执行，或者把解构后的变量加入useEffect的依赖数组监听更新。
• 检查属性名拼写与传递链路
  你可以在解构语句的前一行添加console.log(props)，验证打印的props对象中是否确实存在customFields、onEdit等属性。如果不存在，需要向上排查PropertyItem、PropertyGroups组件传递props时是否存在拼写错误、大小写不一致、漏传属性的问题。

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