顶级函数 - TypeError: Object(...) is not a function compose答案

【问题标题】：Top level function - TypeError: Object(...) is not a function compose顶级函数 - TypeError: Object(...) is not a function compose
【发布时间】：2018-12-10 04:42:12
【问题描述】：

在我的项目中，我使用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>
    )
})

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

【问题讨论】：

如何导入compose 函数？您是否将其导入为import { compose } from 'recompose'？
是的 - 我正在从 recompose 导入 compose
抱歉，我的问题不清楚。您是否在导入时将compose 包裹在花括号中？我很确定重组需要花括号。它应该是 import { compose } from 'recompose' 而不是 import compose from 'recompose'。这是两个不同的导入，如果花括号丢失，我可以看到您发布的错误消息。
我使用花括号按我应该的方式导入（例如import { compose } from 'recompose'）。
你试过一步步删除compose中的函数吗？

标签： reactjs react-google-maps recompose

【解决方案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 部分。你可能有一个单独的问题。

【讨论】：

重构了代码，甚至尝试注释掉withHandler sn-p 但它仍然给我同样的错误..TypeError: Object(...) is not a function
现在哪一行给出了错误？如果只是尝试直接使用 LocationPickerView 而不进行增强（可能需要注释掉 ref）怎么办？