当数组从父级变为子级时传递一个数组

Question

我正在尝试使用 nearbySearch 从 Google 地图 API 获取离我最近的地方，并将此数据发送到我的子组件以在地图中放置标记。

这是我调用 Google 服务附近搜索的功能，它在 console.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} />
   )
}

但是return好像没有调用子组件发送数据

我在父组件中调用这个函数：

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 没有出现，地图中也没有显示标记。

我试图通过

接收子组件

export const MainMarkersGoogle = ({places}) => {

和

export const MainMarkersGoogle = places => {

得到相同的结果。

编辑：我也显示了函数 getNearby，也许问题出在这个函数内部，但我找不到位置：

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

检查Google Maps 的文档以进行反应，onZoomChanged 是一个void 事件侦听器。它不应该 return 一个元素 https://react-google-maps-api-docs.netlify.app 。一种方法是用位置更新状态变量并安装组件。当然，您可以 big-brain 这个并找到其他方法来实现相同的结果。此外，您正在更新 Promise 内部的位置和 Promise 外部的 return 位置，因此当您 return 它们时它们是空的，因为 Promise 未解决。尝试使用async-await来达到blocking-like的效果。

当数组从父级变为子级时传递一个数组

Pass an array when it changes from parent to child

google-maps

reactjs

react-google-maps-api