React中传递含数组的两个props时子组件取值嵌套问题如何解决？

问题原因 #

React 函数组件的第一个入参是整体props对象，所有父组件传递的属性都会被挂载到该对象上，你声明的第二个入参selectedGroup实际对应的是React函数组件的第二个预留ref参数，并不会接收你传递的props属性，因此才会出现所有属性都在第一个入参里的情况。

解决方法 #

两种写法都可以实现直接获取对应属性：

• 参数位置直接解构
  直接在函数入参位置对props对象做解构，写法如下：

  export default function CountData({ onchoiceChange, selectedGroup }) {
    // 组件内部可直接使用onchoiceChange、selectedGroup两个变量
  }
  

• 先接收完整props再解构
  先拿到整体props对象，再从对象中提取需要的属性：

  export default function CountData(props) {
    const { onchoiceChange, selectedGroup } = props
    // 后续直接使用两个变量即可
  }
  

额外注意 #

你传递的属性中label: A的写法如果A是字符串常量需要加引号，否则会被识别为变量导致报错，正确写法为label: 'A'。

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