Question

我的目标是在从我的父组件获取位置坐标后在传单地图（子）组件上生成一个标记，在那里我使用了 react-places-autocomplete（启用了地理编码 API、Maps JavaScript API 和地点 API）。问题是，因为坐标是使用异步函数获取的，如果我将坐标作为道具传递，它最初会在我的子组件中显示为空。我认为 useEffect 将成为解决方案，但我只是不知道如何做到这一点。任何帮助将非常感激。附上与问题相关的代码片段。

//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>

然后再次在 return() 中，我想将“坐标”作为道具传递。如果用户在输入中输入位置，我将在我的组件的地图上显示一个标记。如果他不这样做，我不想显示标记，但我仍然希望组件与所有其他道具一起呈现

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

代码位： enter image description here

将异步数据（道具）传递给子组件？ [反应]

0 个答案: