React：[object Object] 通过选择/选项值传递答案

【问题标题】：React: [object Object] passed through select/option valueReact：[object Object] 通过选择/选项值传递
【发布时间】：2020-10-26 17:39:37
【问题描述】：

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

import React,{useState} from 'react';
import {TextField, Button} from '@material-ui/core'

const OrderForm = props => {
    
    const [products, setProducts] = useState([])
    // const [id, setId] = useState('')
    const [name, setName] = useState('')
    const [qty, setQty] = useState('')


    const showProducts = () => {
        console.log(products)
    }

    const handleSubmit = event => {
        event.preventDefault();
        setProducts(prev => [
            ...prev,
            {
                id: event.id,
                name: event.name,
                qty: event.qty
            }
        ])
    }
    const handleChange = product => {
        console.log(product)
        setProducts(prevProduct => [
            ...prevProduct,
            product
        ])
    }

    return (
       <div>
            <form onSubmit={handleSubmit}>

            
            <select
            onChange={e => handleChange(e.target.value)}
            >
                {
                    props.allProducts.map(product => (

                    <option value={product}  key={product._id}>{product.name}</option>

                    ))

                }
            </select>
            <TextField 
                variant='standard'
                color='secondary'
                type='text'
                label='Product Name'
                value={name}
                onChange={e => setName(e.target.value)}
            />

            <TextField      
                variant='standard'
                color='secondary'
                type='text'
                label='Product Quantity'
                value={qty}
                onChange={e => setQty(e.target.value)}
            />
             <Button
                variant='contained'
                size='large'
                type='submit'
                color='secondary'
                >Place Order</Button>

            </form>

            <Button
                variant='contained'
                size='large'
                onClick={showProducts}
                color='secondary'
                >Show Products Array []</Button>
        </div>
    )

}

export default OrderForm;

有趣的是，它与 material-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>

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html reactjs react-hooks

【解决方案1】：

因为您使用的是 html 而不是库提供的组件，所以您必须接受 value 属性必须是字符串，因此 <option value={product} 将产品转换为字符串，首先是 [Object object]。

您应该改用product.id，并在包含选择上调整您的handleChange 以考虑到这一点。

【讨论】：