Tengo un componente de reacción basado en funciones que necesita algunos datos de lat y lng para pasar a mi componente Autocomplete . Estoy tratando de obtener lat y lng de una función interna, pero no pude. traté de hacer
{ lat, lng } = getLatLng(results[0])pero arroja algún error de sintaxis, así que también probé
lat = getLatLng(results[0].lat) lng = getLatLng(results[0].lng)pero no parece funcionar. Esto parece un problema tan simple, pero no puedo entender por qué. Intenté poner la palabra clave var al frente también, pero no funcionó, ni esperaba que lo hiciera. A continuación se muestra mi código completo para el componente.
import usePlacesAutocomplete, { getGeocode, getLatLng } from "use-places-autocomplete" import { useDispatch } from "react-redux"; import { setOrigin, setDestination } from '../../Slices/originDestinationSlice' import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export const StartPlaces = () => { const dispatch = useDispatch() const { ready, value, setValue, suggestions: { status, data }, clearSuggestions } = usePlacesAutocomplete(); const handleSelect = async (val, selectedValue) => { setValue(val, true); // clearSuggestions(); const results = await getGeocode({ address: val }); // { lat, lng } = getLatLng(results[0]) lat = getLatLng(results[0].lat) lng = getLatLng(results[0].lng) } return <> <h4>Enter Origin</h4> <Autocomplete id="free-solo-demo" freeSolo options={data.map(({ description }) => description)} onChange={(event, value) => { dispatch(setOrigin({ coordinates: { lat, lng }, name: value })) }} renderInput={(params) => <TextField {...params} label="Origin" onChange={(e) => handleSelect(e.target.value)} placeholder="eg Las Vegas" />} sx={{ width: 300 }} /> </> }Cualquier ayuda sería muy apreciada. ¡¡gracias de antemano!!
debe save su lat e lng en un estado para usarlos correctamente
intenta cambiar tu código así
import usePlacesAutocomplete, { getGeocode, getLatLng } from "use-places-autocomplete" import React, {useState} from 'react' import { useDispatch } from "react-redux"; import { setOrigin, setDestination } from '../../Slices/originDestinationSlice' import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export const StartPlaces = () => { const dispatch = useDispatch() const { ready, value, setValue, suggestions: { status, data }, clearSuggestions } = usePlacesAutocomplete(); const [lat, setLat] = useState(0) const [lng, setLng] = useState(0) const handleSelect = async (val, selectedValue) => { setValue(val, true); // clearSuggestions(); const results = await getGeocode({ address: val }); const {lat, lng} = getLatLng(results[0]) setLat(lat) setLng(lng) } return <> <h4>Enter Origin</h4> <Autocomplete id="free-solo-demo" freeSolo options={data.map(({ description }) => description)} onChange={(event, value) => { dispatch(setOrigin({ coordinates: { lat, lng }, name: value })) }} renderInput={(params) => <TextField {...params} label="Origin" onChange={(e) => handleSelect(e.target.value)} placeholder="eg Las Vegas" />} sx={{ width: 300 }} /> </> }