#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 } }) }, []);