Estoy escribiendo un programa realmente simple pero tengo un pequeño problema. Cuando escribo un nuevo presagio en la etiqueta de entrada, quiero agregarlo a la matriz que está en estado y mostrar todo el contenido de la matriz en el cuadro de alerta. ¿Cómo puedo hacerlo de la manera más fácil?
class Draw extends React.Component { state = { omen: "", omens: ["first", "second", "third"], newOmen: "", }; handleRandomOmen = () => { const omensArray = this.state.omens; const randomOmen = omensArray[Math.floor(Math.random() * omensArray.length)]; this.setState({ omen: randomOmen, }); }; handleChange = (e) => { this.setState({ newOmen: e.target.value, }); }; handleAddOmen = () => { const test = this.state.omens.push(this.state.newOmen); console.log(test); }; render() { return ( <div className="app"> <button onClick={this.handleRandomOmen}>Show omen</button> <br /> <input type="text" value={this.state.newOmen} onChange={this.handleChange} /> <button onClick={this.handleAddOmen}>Add omen</button> <h1>{this.state.omen}</h1> </div> ); } } ReactDOM.render(<Draw />, document.getElementById("root"));siempre necesita actualizar un estado con setState , agregar un nuevo valor de matriz con push será anulado por el próximo ciclo de reacción.
Puede usar su sintaxis extendida para crear una nueva matriz con los valores antiguos + su nueva:
handleAddOmen = () => { this.setState({ omens: [ ...this.state.omens, this.state.newOmen ] }); };