Question

我试图通过组合框传递要映射的对象，但它传递的是[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>

任何帮助将不胜感激！

Answer 1

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

您应该改用[Object object]，并在包含选择项上调整product.id来考虑这一点。

反应：[对象对象]通过选择/选项值传递

1 个答案: