Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

74
Vistas
My function returns an object. How to set return value to specific key value in React

I have a function in my react code as so...

  const getLatLngFromAddress = async () => {
    try {
      const response = await Geocode.fromAddress(state.address.address1)
      const { lat, lng } = response.results[0].geometry.location;
      return { lat, lng }
    } catch (err) {
      console.log(err.message)
    }
  }

returns an object. I would like to set my state to only a specific key of the object and not the object itself...

  useEffect(async () => {
    setState({
      ...state,
      address: {
        ...state.address,
        lat: await getLatLngFromAddress().lat,
        lng: await getLatLngFromAddress().lng
      }
    })

  }, []);

useEffect above returns undefined. Is there any way to do this?

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You need to read the properties from the value resolved from the promise. Currently you are trying to read them from the promise itself and then awaiting those undefined values.

lat: (await getLatLngFromAddress()).lat,

However, you are calling getLatLngFromAddress twice. Store the values in variables and then reuse them instead.

  useEffect(async () => {
    const latlng = await getLatLngFromAddress()
    setState({
      ...state,
      address: {
        ...state.address,
        ...latlng,
      }
    })

  }, []);
7 months ago · Juan Pablo Isaza Denunciar

0

Call the method once, and set it to your state:

useEffect(async () => {
    const {lat, lng} = await getLatLngFromAddress();
    setState({
      ...state,
      address: {
        ...state.address,
        lat: lat,
        lng: lng
      }
    })

  }, []);

You can also spread the result if you dont want to repeat all variables:

useEffect(async () => {
    const result = await getLatLngFromAddress();
    setState({
      ...state,
      address: {
        ...state.address,
        ...result
      }
    })

  }, []);
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos