Código
........ ........ state = { users: [], currentUser: '', currentAge: '', }; ........ ........ onSubmitHandler = (e) => { const Person = { name: this.state.currentUser, //already assign in another function age: this.state.currentAge,//already assign in another function }; this.setState({ users: [...this.state.users, Person], }); }; render() { return ( <div> <h1></h1> <form onSubmit={this.onSubmitHandler}> <label> Enter your name: <input type="text" onChange={this.onChangeNameHandler} /> </label> <br /> <label> Enter your Age: <input type="number" onChange={this.onChangeAgeHandler} /> </label> <br /> <input type="submit" /> </form> <ul> {this.state.users.map((user) => { return <UserCard name={user.name} age={user.age} />; })} </ul> </div> ); } }Error
Warning: Each child in a list should have a unique "key" prop. Check the render method of `UserForm`. See https://reactjs.org/link/warning-keys for more information. at UserCard (https://react-3agtbk.stackblitz.io/~/src/components/UserCard.js:7:1) at UserForm (https://react-3agtbk.stackblitz.io/~/src/components/UserForm.js:10:9) at div at AppEstoy tratando de agregar el Objeto de persona a la matriz de usuarios . Sin embargo, cuando trato de console.log(this.state.users), siempre muestra [ ] . Agregué preventDefault en mi función onSubmitHandler que resuelve el problema. En mi otro proyecto, no agregué onSubmitHandler, que aún funciona. ¿Por qué sucede? Gracias por adelantado.
Dos problemas:
Nada en onSubmitHandler impide la acción predeterminada del envío, que es enviar el formulario al servidor y reemplazar la página por completo con el resultado del servidor.
Debe agregar una llamada a e.preventDefault() para evitar la acción predeterminada del envío.
Su llamada a setState debe estar usando la versión de devolución de llamada:
this.setState(({users, currentUser, currentAge}) => { const Person = { name: currentUser, age: currentAge, }; return {users: [...users, Person]}; });Esa es la mejor práctica cada vez que actualiza el estado en función del estado existente.
Además, como nota al margen, los nombres de variables con límite inicial en el código JavaScript están casi universalmente reservados para funciones de constructor. La convención abrumadoramente estándar para solo una variable local que se refiere a un objeto es usar minúsculas iniciales ( person , no Person ).
Poniendo todo eso junto:
onSubmitHandler = (e) => { e.preventDefault(); this.setState(({users, currentUser, currentAge}) => { const person = { name: currentUser, age: currentAge, }; return {users: [...users, person]}; }); };