2

En el código que expongo abajo, lo que quiero hacer es agrandar el array 'locationList' de mi objeto 'initialData' agregando un nuevo objeto 'locationData'. Como podrán ver, me estoy apoyando del useState, pero no encuentro la manera correcta de poder hacerlo correctamente. ¿Alguien me ayuda?

const FullRoute = () => {

  const initialData = {
    locationList: [],
    otherList: []
  }

  const [data, setData] = useState(initialData);

  const addToLocationList = (locationData) => {
      setData({
        ...data,
        ['locationList']: locationData
      })

    }

    ...

}

export default FullRoute
4
  • ¿Por qué estás inicializando el initialData fuera del useState()? ¿No sería más lógico hacerlo así const [data, setData] = useState({locationList: [], otherList: []});? Pienso que así te ahorrarías un paso innecesario. el 30 jun. 2021 a las 11:59
  • Gracias por responder Desarrollos-Web-urquiza. Tienes razón, lo que pasa es que en el ejemplo real que estoy trabajando el objeto tiene más elementos, y se ve más prolijo separando la constante.
    – Skywalker
    el 30 jun. 2021 a las 12:06
  • Gracias por responder Emeeus, pero no es correcto. Me larga el error de que locationData no es iterable.
    – Skywalker
    el 30 jun. 2021 a las 12:14
  • locationData es un objeto del tipo { id: 0, longitude: -40000, latitude: 50000}
    – Skywalker
    el 30 jun. 2021 a las 12:21

1 respuesta 1

1

Tienes que crear una nueva lista añadiendo tu objeto en la lista.

const addToLocationList = (locationData) => {
  // se crea un nuevo array con el nuevo dato agregandolo y este luego se asigna al state
  const locationList = [...data.locationList, locationData]
  setData({
    ...data,
    locationList  // locationList: locationList es equivalente, en ES6 cuando la propiedad es la misma que la variable no hace falta especificarlo
  })

}
2
  • Idolo!!!!!!!!!!!!!!!!!!!!!!!!!! Me funcionó, pero es setData({ ...data.locationList, locationList}) Muchísimas gracias!!
    – Skywalker
    el 30 jun. 2021 a las 12:32
  • si haces eso perderás los datos del otherList. Primero tienes que copiar el state que ya existe ({...data}) y luego asignar el nuevo valor a la propiedad locationList. Que es lo que te he puesto
    – hawks
    el 30 jun. 2021 a las 14:31

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.