Estoy representando una matriz de objetos, luego intento agregarle una nueva propiedad a través de una función, pero ese nuevo valor de propiedad no se representa. Cuando registro el objeto en la consola, puedo ver que la propiedad y el nuevo valor están ahí. Esa nueva propiedad es tag . Supongo que esto tiene algo que ver con e.preventDefault() . ¿Cómo puedo arreglar esto?
const addTag = (e,id) => { e.preventDefault() let text = e.target.tag.value let obj = stu.find(x => x.id === id) obj.tag = text console.log(obj) } return ( <div className="App"> {stu.map((student, id) => ( <div key={id}> <p>{student.email}</p> <p>{student.firstName}</p> <p>{student.tag}</p> <form onSubmit={(e) => addTag(e, student.id)}> <input type="text" id="tag"/> <button type="submit">Submit</button> </form> </div> ))} </div> ); }Su variable de estado es una matriz. Modificar objetos en esa matriz (o incluso agregar/eliminar elementos por completo) no hará que reaccione para volver a renderizar. La referencia a la matriz debe cambiar. Una manera fácil de hacer esto es copiar los elementos a una nueva matriz:
const addTag = (e,id) => { e.preventDefault() let text = e.target.tag.value let obj = stu.find(x => x.id === id) obj.tag = text setStu([...stu]) }* puede tener problemas ya que está ingresando solo en el índice del elemento. Considere cambiar su valor clave también