Блог

Я пытаюсь отобразить свойство первого объекта в массиве в качестве элемента по умолчанию. Когда я пытаюсь отправить свою форму в данный момент, я получаю нулевое значение для выбора, потому что я его не задействовал. Как мне убедиться, что значение присутствует? Я использую react-bootstrap . Ниже приведены фрагменты кода, отражающие эту проблему:

Вот фокус, я не уверен, что поместить в поле значения. Я хочу сослаться на 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>
  

Home.js

 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}
/>
  

Create.js

 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}amp;menu_name=${this.state.menu_name}amp;time_joined=${sqlStamp}`,
                { method: "POST" }
            ).catch((error) => {
                console.log(error)
            })
        }
  

Можете ли вы попробовать defaultValue form-control-props

 <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>