Intenté muchas formas de seleccionar algunas opciones de la selección, pero no funcionó. ¿Podrían ayudarme a resolver mi problema, por favor? Cuando hago un console.log, las opciones seleccionadas cambian, pero la interfaz no lo muestra. Se mantiene la opción por defecto "Seleccionar la opción". Estoy usando react-bootstrap y firebase. no se cual es el error Estaba pensando en el navegador, pero no es el problema.
class Formm extends Component { constructor(props) { super(props); this.state = { detail: "", cost: 0, category: "" }; this.setCategory = this.setCategory.bind(this); console.log(this.state); } setCategory = (e) => { let index = e.target.selectedIndex; this.setState({ category: e.target.value}); console.log(e.target.value) }; render() { const { detail, cost, category } = this.state; return ( <div> <FirebaseDatabaseProvider firebase={firebase} {...firebaseConfig}> <FirebaseDatabaseNode path="category/"> {(data) => { const { value } = data; if (value === null || typeof value === "undefined") return null; const values = Object.values(value); return <div className="row justify-content-center"> <div className="form-group col-md-6"> <label htmlFor="">Insert the type:</label> <select onChange={this.setCategory} value={category} className="form-control" > <option value={null}>Select the option</option> {values.map((value) => { return ( <option key={value} value={value}> {value} </option> ); })} </select> </div> </div>; }} </FirebaseDatabaseNode> </FirebaseDatabaseProvider> </div>Es porque está usando la palabra clave "esta" dentro de una función de flecha que su estado establecido no se ejecuta.
“esto” se refiere a la Clase misma, pero una función de flecha, a diferencia de una función estándar, no hace referencia a la Clase aunque esté definida dentro de la Clase.
Afortunadamente, hay una solución fácil: si cambia setCategory a una función usando la palabra clave de función, su código se ejecutará como espera.