Javascript 反应-如何在选择表单中将数组的第一个值显示为默认值？

我试图将数组中第一个对象的属性显示为默认项。当我试图提交我的表单时，我得到了一个空的选择值，因为我没有参与它。如何确保该值存在？我正在使用

react引导程序

。以下是代表此问题的代码片段：

这里是重点，我不确定在值字段中放什么。我想要的是引用

id

值，如果我的数组中只有一项，我不必打开下拉列表，该id将已经存在：

<Form.Control as="select" value={WHAT DO I DO HERE??} onChange={props.handleCart}>
   {props.carts.map((cart,i) => <option key={cart.id} value={cart.id}>{cart.cart_name</option>)})                 
</Form.Control>

你能试试defaultValue吗

{props.carts.map（（cart，i）=>(
{cart.cart_name}
))}

没有骰子，尝试过，但当我在

模式中单击submit时仍然给我空值。这是通常的做法吗？我想其他人也会为下拉菜单映射一系列选项。也许强制选择更好？换言之，让它为空，然后让人们选择。我认为最好是给出一个选择，而不是强制首先作为默认值。我不知道这里的全部内容，但第一个选项并不总是用户想要的选择。建议用什么方法强迫用户从下拉列表中进行选择？因为当模态启动时，下拉列表已经存在。我将如何强制该人员进行选择？我发现在选择之前添加以下内容似乎有效
choose…
它必须有效，您能检查id是否为number类型吗？如果是这样，您需要将值设置为
props.carts[0].id.toString（）
constructor() {
        super();
        this.state = {
    myCarts = [
    {'id':'1', 'cart_name': 'my cart 1'},
    {'id':'2', 'cart_name': 'my cart 2'}
    ],
showMenu: false
}
}

...

Return
<Create
showMenu = {this.state.showMenu}
menuModalToggle={this.menuModalToggle} 
carts = {this.state.carts}
/>

const CreateMenuModal = (props) => {
    console.log('props carts there?',props.carts);
    return (
            <Modal
            //dialogClassName={classes.modal}
            show={props.showMenu}
            onHide={props.menuModalToggle}
            >
                 <Modal.Header closeButton>
                    <Modal.Title>Create Menu</Modal.Title>
                </Modal.Header>
                <div style={{ textAlign: 'center', padding: 10 }}>
                    Fill out the following details to create menus for your cart. Once you create a menu you will have the option to add and remove items from that menu.
                    </div>
                <Modal.Body>
                    <Form>
                        <Form.Group controlId="cart_check">
                            <Form.Label>Choose which cart this menu is for:</Form.Label>
                            <Form.Control as="select" value={WHAT DO I DO HERE??} onChange={props.handleCart}>
                            
                                   {props.carts.map((cart,i) => <option key={cart.id} value={cart.id}>{cart.cart_name}</option>)})
                    
                            </Form.Control>
                        </Form.Group>
                        <Form.Group controlId="menu_name">
                            <Form.Label>Enter a name for your menu:</Form.Label>
                            <Form.Control
                                required placeholder="My Menu" name="menu_name" type="email" onChange={props.handleChange} value={props.menu_name} 
                            />
                        </Form.Group>

                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={props.menuModalToggle}>Cancel</Button>
                    <Button variant="primary" onClick={props.createMenu}>Add Menu</Button>
                </Modal.Footer>
        
            </Modal>

    )
}

  //CREATE A MENU
        createMenu = () => {
            console.log('create menu with:', this.state.cart_id, this.state.menu_name);
            this.setState({ showMenu: !this.state.showMenu, menuAdded: !this.state.menuAdded });
            let sqlStamp = moment().utcOffset('-0400').format("YYYY-MM-DD HH:mm:ss").substr(0, 18) + '0';
            fetch(
                `${global.api}/addMenu?cart_id=${this.state.cart_id}&menu_name=${this.state.menu_name}&time_joined=${sqlStamp}`,
                { method: "POST" }
            ).catch((error) => {
                console.log(error)
            })
        }

<Form.Control
  as="select"
  value={props.carts[0].id.toString()}
  defaultValue={props.carts[0].id.toString()}
  onChange={props.handleCart}
>
  {props.carts.map((cart,i) => (
    <option key={cart.id} value={cart.id}> 
       {cart.cart_name}
    </option>
  ))}
</Form.Control>