Javascript React:[对象]通过选择/选项值传递

我试图通过组合框传递一个映射的对象，但它传递的是[object object]的值，而不是真实的对象。如果我记录对象而不是渲染它，它会显示正确的对象，但不会通过选项传递值

import React，{useState}来自“React”；
从“@material ui/core”导入{TextField，Button}”
const OrderForm=props=>{
const[products，setProducts]=useState（[]）
//const[id，setId]=useState（“”）
const[name，setName]=useState（“”）
常量[数量，设置数量]=使用状态（“”）
const showProducts=（）=>{
console.log（产品）
}
const handleSubmit=事件=>{
event.preventDefault（）；
setProducts（上一个=>[
…上一页，
{
id:event.id，
名称：event.name，
数量：事件数量
}
])
}
const handleChange=产品=>{
console.log（产品）
setProducts（prevProduct=>[
…以前的产品，
产品
])
}
返回(
handleChange（e.target.value）}
>
{
props.allProducts.map（product=>(
{product.name}
))
}
setName（e.target.value）}
/>
设置数量（即目标值）}
/>
下单
显示产品数组[]
)
}
导出默认订单；

有趣的是，它与材质ui完美配合：

                <Select
                
                style={{width:"120px"}}
                value={products}
                onChange={e => handleChange(e.target.value)}
                >
                {
                    theProducts.map(product => (
                        
                        <MenuItem key={product._id} value={product}> {product.name} </MenuItem>
                
                    ))
                }

                </Select>

handleChange（e.target.value）}
>
{
products.map（产品=>(
{product.name}
))
}

---

任何帮助都将不胜感激

因为您使用的是html而不是库提供的组件，所以您必须接受

值必须是字符串，所以

                <Select
                
                style={{width:"120px"}}
                value={products}
                onChange={e => handleChange(e.target.value)}
                >
                {
                    theProducts.map(product => (
                        
                        <MenuItem key={product._id} value={product}> {product.name} </MenuItem>
                
                    ))
                }

                </Select>