Моя функция возвращает объект. Как установить возвращаемое значение для определенного значения ключа в React

#javascript #reactjs #async-await

Вопрос:

У меня есть функция в моем коде реакции, как таковая…

 const getLatLngFromAddress = async () =gt; {  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)  }  }  

возвращает объект. Я хотел бы установить свое состояние только для определенного ключа объекта, а не для самого объекта…

 useEffect(async () =gt; {  setState({  ...state,  address: {  ...state.address,  lat: await getLatLngFromAddress().lat,  lng: await getLatLngFromAddress().lng  }  })   }, []);  

Эффект использования выше возвращает неопределенное значение. Есть ли какой-нибудь способ сделать это?

Ответ №1:

Вам нужно прочитать свойства из значения, разрешенного из обещания. В настоящее время вы пытаетесь прочитать их из самого обещания, а затем await определить эти undefined значения.

 lat: (await getLatLngFromAddress()).lat,  

Однако вы звоните getLatLngFromAddress дважды. Сохраните значения в переменных, а затем используйте их повторно.

 useEffect(async () =gt; {  const latlng = await getLatLngFromAddress()  setState({  ...state,  address: {  ...state.address,  ...latlng,  }  })   }, []);  

Ответ №2:

Вызовите метод один раз и установите его в свое состояние:

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

Вы также можете распространить результат, если не хотите повторять все переменные:

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