React切换select报onItemSelect不是函数错误及下拉框传参问题

问题1：onItemSelect is not a function 报错原因及修复 #

报错核心原因是 onItemSelect属性传递给了错误的组件：你在Main组件里把onItemSelect={handleCategorySelect}传给了Product组件，但实际需要调用该属性的是ListGroup组件，ListGroup没有接收到该prop，解构后得到的onItemSelect为undefined，调用时就会抛出类型错误。
修复方法：给ListGroup组件补充传递onItemSelect属性即可：

// Main组件render部分修改
<ListGroup items={categories} onItemSelect={handleCategorySelect} />

如果Product组件不需要用到该属性，可把Product标签上的onItemSelect属性删除，避免冗余。

问题2：select组件选中时传递完整item对象的实现方法 #

select的option不能直接绑定对象作为值，你可以通过唯一标识匹配的方式拿到完整对象，实现步骤如下：

1. 给每个option的value属性绑定item的唯一id（你代码里对应的是_id）
2. 在select的onChange事件中，通过事件对象拿到选中的id，再从items数组里匹配到对应的完整item对象
3. 把匹配到的item传给onItemSelect回调即可

修改后的ListGroup组件代码示例：

import React from "react";

function ListGroup(props) {
  const { items, onItemSelect } = props;
  return (
    <form>
      <select
        id="category"
        name="category"
        onChange={(e) => {
          // 拿到选中的id
          const selectedId = e.target.value;
          // 匹配完整item对象
          const selectedItem = items.find(item => item._id === selectedId);
          // 传给回调函数
          onItemSelect(selectedItem);
        }}
      >
        <option hidden value="">
          Choose here
        </option>
        {items.map((item) => (
          // 给option绑定_id作为value
          <option key={item._id} value={item._id}>{item.name}</option>
        ))}
      </select>
    </form>
  );
}

export default ListGroup;

之后你在Main组件的handleCategorySelect里就能直接拿到选中的完整item对象：

const handleCategorySelect = (selectedItem) => {
  console.log("选中的分类：", selectedItem);
};

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