My function returns an object. How to set return value to specific key value in React-CodePudding

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?

CodePudding user response：

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,
      }
    })

  }, []);

CodePudding user response：

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
      }
    })

  }, []);