如何处理react-select组件OnChange并为数组对象设置prodId

我需要为数组对象的prodId属性设置react-select组件的OnChange事件，把选中值（e.value）赋值给该属性，但现有处理函数无法适配。同时想咨询：是否可以单独创建prodId的useState数组，再将选中值推入Product_Details数组？

现有代码 #

状态定义与初始化

const [Product_Details, setProduct_Details] = useState([]);

useEffect(() => {
    if (BillIdFetch === undefined) return;
    setProduct_Details([
      {
        index: Math.random(),
        billId: BillIdFetch,
        // 需要为这个属性处理react-select的OnChange
        prodId: "",
        price: "",
        prod_SrNo: "",
        discount: "0",
        Qty : "1",
        Prod_Status: "NULL",
        proData_warranty_In_Prcnt: "NULL",
        Credit_Note: "NULL",
        Replacement: "NULL",
       
      },
    ]);
  }, [BillIdFetch]);

现有输入处理函数（无法设置prodId）

const handleProductDetailsInputs = (index, e) => {
    const Pdetails = [...Product_Details];
    Pdetails[index][e.target.name] = e.target.value;
    setProduct_Details(Pdetails);
};

React-Select组件代码

return (
    <>
        <tr key={val.index}>
            <td>
                <Select
                    key={val.id}
                    required
                    className="form-select"
                    id={prodId}
                    data-id={idx}
                    name="prodId"
                    onChange={(e) => handleProductDetailsInputs(idx, e)}
                    options={Select_Product_Options}
                />
            </td>
        </tr>
    </>
)

一、修改现有处理函数适配React-Select #

React-Select的onChange回调参数不是原生DOM事件对象，而是选中的选项对象，所以不能用e.target.name和e.target.value。直接修改处理函数如下：

const handleProductDetailsInputs = (index, selectedOption) => {
    // 复制原数组避免直接修改状态
    const updatedDetails = [...Product_Details];
    // 更新对应索引的prodId属性
    updatedDetails[index].prodId = selectedOption.value;
    setProduct_Details(updatedDetails);
};

如果需要让函数同时兼容原生表单控件（如input、原生select）和React-Select，可以加判断逻辑：

const handleProductDetailsInputs = (index, inputOrOption) => {
    const updatedDetails = [...Product_Details];
    // 区分是原生事件还是React-Select的选项对象
    const { value, name } = inputOrOption.target 
        ? inputOrOption.target 
        : { value: inputOrOption.value, name: 'prodId' };
    
    updatedDetails[index][name] = value;
    setProduct_Details(updatedDetails);
};

二、关于单独创建prodId的useState数组的问题 #

可以这么做，但不推荐，原因如下：

• 增加状态冗余：prodId已经是Product_Details数组中每个对象的属性，单独维护数组会导致两个状态同步复杂，容易出现数据不一致。
• 提升维护成本：每次更新prodId数组后，还要手动同步到Product_Details，额外增加代码复杂度。

如果业务需要单独获取prodId列表，直接从现有状态派生即可，无需额外维护状态：

// 派生prodId数组
const prodIds = Product_Details.map(item => item.prodId);

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