Top level function - TypeError: Object(...) is not a function compose

Question

在我的项目中，我使用 recompose/react-google-maps 定义了一个顶级组件，如下所示：

const LocationPicker = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,places&key=AIzaSyDnKwHUG_EJXN5EEW6hTftZHYo8E8QTTXY",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
    withState('places', '', ''),
    withHandlers(() => {
        refs = {
            map: undefined,
        }

        return {
            onMapMounted: () => ref => {
                refs.map = ref
                service = new google.maps.places.PlacesService(refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED);
            },
        }
    }),
)((props) => {
    return (
        <GoogleMap
            ref={props.onMapMounted}
            defaultZoom={13}
            defaultCenter={{ lat: 42.3570637, lng: -71.06257679999999 }}
        >
            {props.marker &&
                <Marker position={{ lat: props.marker.lat, lng: props.marker.lng }} draggable={true} />
            }
        </GoogleMap>
    )
})

这是一个定义在 class 范围之外的组件。我收到以下错误： TypeError: Object(...) is not a function 为什么我不能这样定义组件？

Answer 1

首先，我会将其分解为一个无状态功能组件，然后使用 Recompose 增强该组件。

const LocationPickerView = props => (
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={13}
    defaultCenter={{ lat: 42.3570637, lng: -71.06257679999999 }}
  >
    {props.marker && (
      <Marker position={{ lat: props.marker.lat, lng: props.marker.lng }} draggable />
    )}
  </GoogleMap>
);

const LocationPicker = compose(
  withProps({
    googleMapURL:
      'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,places&key=AIzaSyDnKwHUG_EJXN5EEW6hTftZHYo8E8QTTXY',
    loadingElement: <div style={{ height: '100%' }} />,
    containerElement: <div style={{ height: '400px' }} />,
    mapElement: <div style={{ height: '100%' }} />
  }),
  withScriptjs,
  withGoogleMap,
  withState('places', '', ''),
  withHandlers(() => {
    refs = {
      map: undefined
    };

    return {
      onMapMounted: () => ref => {
        refs.map = ref;
        service = new google.maps.places.PlacesService(
          refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
        );
      }
    };
  })
)(LocationPickerView);

我认为这将解决您的问题 TypeError。如果没有，请尝试注释掉 ref 和 withHandler 部分。您可能在那里有一个单独的问题。

Top level function - TypeError: Object(...) is not a function compose

Top level function - TypeError: Object(...) is not a function compose

reactjs

recompose

react-google-maps