Obtengo los valores correctos en el menú desplegable, pero después de eso, cuando llamo al cambio, toda la matriz se pasa como argumento. entonces e tiene toda la matriz y no solo el valor seleccionado, este es el código:
const { accountIDs } = this.state; let accountIDlist = accountIDs.length > 0 && accountIDs.map((item, i) => { return ( <option key={i} value={item}> {item} </option> ); }, this); <Select style={{ width: "100%" }} defaultValue="188619942792" autosize={true} onChange={e => { debugger; console.log(e); this.reset(); this.setAccountID(e); }} > <select value={accountIDlist}>{accountIDlist}</select> </Select>Su componente principal debe administrar el estado, por lo tanto, cargue los identificadores e inicialmente establezca selected en nada. Luego pase las identificaciones y el estado seleccionado a su componente Select . Eso iterará sobre los identificadores para crear las opciones, y si el identificador de una opción coincide con el de la selección, establezca la propiedad selected .
const { Component } = React; class Select extends Component { render() { const { ids, selected, handleChange } = this.props; return ( <select onChange={handleChange}> <option selected>Choose</option> {ids.map(id => { return ( <option value={id} selected={selected === id} >{id} </option> ); })} </select> ); } } class Example extends Component { constructor(props) { super(); this.state = { ids: props.ids, selected: '' }; } handleChange = (e) => { this.setState({ selected: +e.target.value }); } render() { const { ids, selected } = this.state; return ( <Select ids={ids} selected={selected} handleChange={this.handleChange} /> ); } }; const ids = [1, 2, 3, 4, 5]; ReactDOM.render( <Example ids={ids} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div><select name="account_id" onChange={handleChange} > {props.accountIDList.map((accountId) => <option value={accountId}>{accountId}</option>)} </select> Puede establecer el valor predeterminado cuando configura el estado así... const [accountId, setAccountId] = React.useState(account_id: 188619942792);
la respuesta a esto seria:
<Select style={{ width: "100%" }} defaultValue="188619942792" autosize={true} value = {accountIDlist} onChange={e => { this.reset() this.setAccountID(e) }} > {accountIDlist} </Select >no hay necesidad de un componente de selección de niños aquí.