Estoy tratando de agregar dinámicamente un objeto a una matriz de objetos, he estado tratando de desestructurar el objeto principal pero agrega un número al final de la matriz principal. Esto es lo que tengo:
const [data, setData] = useState ([ { _id:1, firstName:'Leo', lastName:'Miller', telephone:'+569273829', mail:'leo.miller@gmail.com', work:[ {_id:1, startWorkDate:'01/01/2015', endWorkDate:'01/02/2017', work:'description...'}, {_id:2, startWorkDate:'01/01/2018', endWorkDate:'01/02/2020', work:'description...'} ] }];Genero dinámicamente este objeto:
const value = {_id:3, startWorkDate:'01/01/2018', endWorkDate:'01/02/2020', work:'description...'} Necesito agregarlo a data.work y luego actualizar solo la descripción de work._id[3]
intento con esta funcion
const addNewWork = (value) => { let copyData = [...data, data[0].workExperience.push(value)] return setData(copyData) }pero por alguna razón no agrega correctamente el objeto. ¡Ayuda por favor!
Puedes hacer esto con esta simple función:
const addNewWork = (value) => { let updatedObj = data[0]; updatedObj.work.push(value) // updates your object each time let copyData = [updatedObj] // adds a new object for each call // let copyData = [...data, updatedObj] return setData(copyData) } Ahora actualiza el objeto en su estado. Si desea agregar un nuevo objeto para cada llamada, simplemente elimine el comentario let copyData = [...data, updatedObj] y comente, let copyData = [updatedObj]
Tienes una matriz y no un objeto. Tu declaración
let copyData = [...data, data[0].workExperience.push(value)]esta haciendo dos cosas:
push() . Que no es la forma de reaccionar.data[0].workExperience . El valor de retorno de Array.prototoype.push es:
La nueva propiedad de longitud del objeto sobre el que se llamó al método.
Lo que tienes que hacer es:
Haz una copia de la matriz. Puede usar ... (operador de propagación) aquí.
Haga una copia del objeto de matriz que desee (primer índice). Intente agregar el objeto a su propiedad específica workExperience .
const addNewWork = (value) => { let newData = [...data]; let newWorkExperienceArray = [...data[0].workExperience,value]; let newDataFirstObject = {...data[0], workExperience : newWorkExperienceArray}; newData[0] = newDataFirstObject; return setData(newData) }También puede actualizar la propiedad. No encontré el código relevante en su pregunta sobre lo que tengo que actualizar, así que no actualicé nada en el tercer objeto workExperience.
EDITAR: parece que en su código el nombre de la propiedad es work y no workExperience . Por favor confirmar. El código anterior usa workExperience , puede reemplazarlo por work si ese es el caso
Cuando establece el estado para la matriz, su setter es bastante diferente
setData(prevData => [...prevData, newItem]) // to add a single item to array setData(prevData => newArray) // to replace entire array