React父子组件传递函数实现数据共享及报错排查

React函数组件接收父组件传入参数的规则是：所有挂载在子组件标签上的属性，都会被合并为一个对象，作为函数的第一个入参传入，不会按属性名拆成多个独立参数。
你的子组件写了两个入参function SelectHours(selectedHours, childToParent)，实际运行时：

• 第一个入参selectedHours拿到的是完整props对象：{value: state.selectedHour, childToParent: 你在父组件定义的函数}
• 第二个入参childToParent没有任何传入值，实际为undefined
  当你在点击事件里执行childToParent(value)时，本质是尝试调用undefined，就会抛出childToParent is not a function的错误。

两种合法的props接收写法二选一即可，父组件的现有写法不需要修改。

方案1：入参先接收props对象，再解构取值 #

export default function SelectHours(props) {
  // 从props对象中取出需要的属性
  const { value: selectedHours, childToParent } = props

  // 原有业务逻辑保持不变
  return (
    <Select
      labelId="select-demo"
      id='select-demo'
      defaultValue=""
      value={workHours[0] ? workHours[0] : ""}
    >
      {
        workHours.map((value, index) => {
          return (
            <MenuItem
              value={value ? value : ""}
              key={index}
              onClick={() => childToParent(value)}
            >
              {value}
            </MenuItem>
          )
        })
      }
    </Select>
  )
}

方案2：入参位置直接解构props #

写法更简洁，直接在函数入参位置解构需要的属性，不需要额外声明变量：

// 注意大括号包裹在第一个入参位置，代表解构传入的props对象
export default function SelectHours({ value: selectedHours, childToParent }) {
  // 原有业务逻辑完全不需要改动
}

• 父组件侧：先定义好接收子组件数据的回调函数，再把函数作为属性值传给子组件标签即可，你当前父组件的写法是符合规范的。
• 子组件侧：所有父组件传入的属性（包括普通值、函数、组件等）都存放在第一个入参的props对象中，必须从该对象中取出对应属性再使用，不能通过多个入参分别接收不同属性。
• 额外优化建议：当前你把点击事件绑定在每个MenuItem上可以实现需求，但更推荐使用Select组件自带的onChange回调获取选中值，不需要给每个选项单独绑定事件，代码更简洁。

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