Блог

Я стремлюсь создать маркер на карте (дочернем) компоненте leaflet после получения координат местоположения от моего родительского компонента, где я использовал автозаполнение react-places (включен API геокодирования, API JavaScript карт и API мест ). Проблема в том, что, поскольку координаты извлекаются с помощью асинхронной функции, если я передам координаты в качестве реквизитов, они изначально будут отображаться как пустые в моем дочернем компоненте. Я думаю, что решением будет эффект использования, но я просто не понимаю, как это сделать. Любая помощь была бы очень признательна. Прикрепление фрагментов кода, имеющих отношение к проблеме.

 //for autocomplete input search, defined inside Parent component
const [address, setAddress] = useState('')
const [coord, setCoord] = useState({
    lat: null,
    long: null
})
const handleSelect = async value => {
    const results = await geocodeByAddress(value)
    const latlng = await getLatLng(results[0])
    setAddress(value)
    setCoord(latlng)
}
 

Внутри return (), следующее для определения местоположения ввода пользователя :

 <div className='city'>
    Search a location<br />
    <PlacesAutocomplete value={address} onChange={setAddress} onSelect={handleSelect}>
                                {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
                                    <div className='search-city'>
                                        <input {...getInputProps({ placeholder: "Type address" })} />

                                        <div className='options'>
                                            {loading ? <div>...loading</div> : null}
                                            {suggestions.map(suggestion => {
                                                const style = {
                                                    backgroundColor: suggestion.active ? '#d1d1d1' : 'white'
                                                }
                                                return (
                                                    <div {...getSuggestionItemProps(suggestion, { style })}>{suggestion.description}</div>
                                                )
                                            })}
                                        </div>
                                    </div>
                                )}
                            </PlacesAutocomplete>
                        </div>
 

А затем в ответ() снова я хочу передать «координацию» в качестве опоры. Если пользователь введет местоположение во ввод, я отобразю маркер на карте в своем компоненте. Если он этого не сделает, я не хочу отображать маркер, но я все равно хочу, чтобы компонент отображался со всеми остальными реквизитами

 <Map setData={setData} check={check} /> //haven't yet declared a coord prop
 

Биты кода :
введите описание изображения здесь