当数组从父数组变为子数组时，传递该数组

Question

我正试图通过谷歌地图API的nearbySearch获取离我很近的地方，并将这些数据发送到我的子组件，以便在地图中放置标记。

这是我调用谷歌服务附近搜索的功能，它会在控制台中打印正确的数据。log

const handleZoomChanged = () => {
let lat = map.mapUrl.split('=')[1].split('&')[0].split(',')[0];
let lng = map.mapUrl.split('=')[1].split('&')[0].split(',')[1];
let places = getNearby(lat, lng);
console.log('places', places);
console.log('length', places.length); //EDIT: I tried to get the length of the array and get 0

return (
<MainMarkersGoogle places={places} />
)
}

但返回时似乎没有调用子组件并发送数据。

我在父组件中调用此函数：

export const MainMap = () => {
const renderMap = () => {
return(  
<GoogleMap
id="map"
onLoad={map => {setMap(map)}}
zoom={15}
center={center}
onZoomChanged={handleZoomChanged}>
</GoogleMap>
)
}
return isLoaded ? renderMap() : 'Loading...'
}

这是子组件：

/* global google */
export const MainMarkersGoogle = ( places )  => {
const [markers, setMarkers] = useState([]);

useEffect(() => {
console.log('child', places)
setMarkers(places)
}, [places])
return(    
{markers.map(({ id, geometry, name }) => (
<Marker
key={id}
position={geometry.location}
animation={google.maps.Animation.DROP}
onClick={() => console.log(id) }
title={name}
>
</Marker>
))}
)
}

useEffect中的console.log不会出现，标记也不会显示在地图中。

我尝试用接收子组件

导出常量MainMarkersGoogle=({places}(=>｛

和

导出常量MainMarkersGoogle=places=>｛

得到相同的结果。

编辑：我也展示了getNear函数，也许这个函数内部有问题，但我找不到位置：

function getNearby(lat, lng) {
let places;
var config = {
method: 'get',
url: `MY_URL`,
headers: { }
};

axios(config)
.then(function (response) {
console.log(response.data);
for(let i = 0; i < response.data.results.length; i++) {
if(response.data.results[i].business_status === 'OPERATIONAL')
places.push(response.data.results[i])
}
})
.catch(function (error) {
console.log(error);
});

return places;   
}

如果你需要我的代码的更多信息，问我，我会编辑这个。

Answer 1

查看谷歌地图的文档以了解react，onZoomChanged是一个void事件侦听器。它不应该返回元素https://react-google-maps-api-docs.netlify.app。这样做的一种方法是用位置更新状态变量，并使组件已经安装。当然，你可以大胆思考，并找到其他方法来实现同样的结果。此外，您正在更新Promise内的位置，并返回Promise外的位置，因此当您返回它们时，它们是空的，因为Promise未得到解决。尝试使用异步等待来实现类似阻塞的效果。