Question

我正在尝试使用传递ng lat变量从Google的地理编码API传递到google maps组件的方法，但是由于geocode函数是一个箭头函数，因此我无法使用此函数之外的值。有没有什么办法解决这一问题？我需要能够使用地址解析函数中的lat和lng常量，并将它们传递给MapWithMarker常量中的lat和lang属性。

Geocode.fromAddress("5th Avenue New York").then(
      response => {
         const{ lat, lng } = response.results[0].geometry.location;


      },
      error => {
        console.error(error);
      }
    );


    const MapWithAMarker = withGoogleMap(props =>
      <GoogleMap
        defaultZoom={0}
        defaultCenter={{ lat: lat, lng: lng }}
      >
        <Marker
          position={{ lat: lat, lng: lng }}
        />
      </GoogleMap>
    );

./ src / components / dashboard / ProductDetails.js 第107行：未定义“ lat” no-undef 第107行：未定义'lng'no-undef 第110行：未定义'lat'no-undef 第110行：“ lng”未定义为no-undef

Answer 1

您可以缓存它们，例如：



const MyMapComponent = function(props) {
    const [position, setPosition] = React.useState();

    React.useEffect(() => {
        Geocode.fromAddress("5th Avenue New York").then(
          response => {
             setPosition(response.results[0].geometry.location);             

          },
          error => {
            console.error(error);
          }
        );
    }, [])

    if (!position) {
        return null;
    }   

    return <MapWithAMarker {...props} lat={position.lat} lng={position.lng} />
}

const MapWithAMarker = withGoogleMap(props =>
  const     
  <GoogleMap
    defaultZoom={0}
    defaultCenter={{ lat: props.lat, lng: props.lng }}
  >
    <Marker
      position={{ lat: props.lat, lng: props.lng }}
    />
  </GoogleMap>
);

现在您可以使用MyMapComponent作为MapWithAMarker的修饰符。

Answer 2

一种实现方法是

var MapWithAMarker;
Geocode.fromAddress("5th Avenue New York").then(
    response => {
        const{ lat, lng } = response.results[0].geometry.location;
        MapWithAMarker = withGoogleMap(props =>
          <GoogleMap
            defaultZoom={0}
            defaultCenter={{ lat: lat, lng: lng }}
          >
            <Marker
              position={{ lat: lat, lng: lng }}
            />
          </GoogleMap>
        );

  }
)
.catch(err => console.log(err));

然后您确实使用它

if( MapWithAMarker ){
    // do whatever you want;
}

我可以从ReactJS中的箭头函数导出值吗？

2 个答案: