React组件同时导出connect与GoogleApiWrapper报错求助

这个错误的核心是高阶组件的嵌套顺序和调用方式错了，咱们一步步拆解：

问题根源 #

你写的代码是：

export default connect( mapStateToProps, { saveMapCoords } )( GoogleApiWrapper({ apiKey: 'xxx' }) )(Maps)

这里的GoogleApiWrapper({ apiKey: 'xxx' })返回的是一个高阶组件函数（它需要接收一个React组件才能生成最终的组件），但connect(...)返回的函数只能接收React组件实例，不能接收另一个高阶函数。当你把GoogleApiWrapper(...)传给connect(...)的返回函数时，它会把这个函数当成组件去处理，自然就抛出了is not a function的错误。

正确的写法 #

你需要先让其中一个高阶组件完成对原始Maps组件的包裹，再把生成的新组件传给另一个高阶组件，两种顺序都可以，看你的需求：

方式1：先连接Redux，再包裹Google API

// 先把Maps组件连接到Redux
const ConnectedMaps = connect(mapStateToProps, { saveMapCoords })(Maps);
// 再用GoogleApiWrapper包裹连接后的组件
export default GoogleApiWrapper({ 
  apiKey: 'AIzaSyA5EqRGJ-YR-2ZCGxThhtFZKwNBy6wk73c' 
})(ConnectedMaps);

方式2：先包裹Google API，再连接Redux

// 先给Maps组件加上Google API支持
const MapsWithGoogle = GoogleApiWrapper({ 
  apiKey: 'AIzaSyA5EqRGJ-YR-2ZCGxThhtFZKwNBy6wk73c' 
})(Maps);
// 再把这个带API的组件连接到Redux
export default connect(mapStateToProps, { saveMapCoords })(MapsWithGoogle);

链式简写（推荐）

如果喜欢一行写完，可以把嵌套关系用括号明确起来：

export default GoogleApiWrapper({ 
  apiKey: 'AIzaSyA5EqRGJ-YR-2ZCGxThhtFZKwNBy6wk73c' 
})(
  connect(mapStateToProps, { saveMapCoords })(Maps)
);

或者反过来：

export default connect(mapStateToProps, { saveMapCoords })(
  GoogleApiWrapper({ 
    apiKey: 'AIzaSyA5EqRGJ-YR-2ZCGxThhtFZKwNBy6wk73c' 
  })(Maps)
);

两种顺序的区别不大，主要看你是否需要在Redux连接逻辑中访问Google API提供的props（如果需要，就选方式2，先包API再连Redux）。

内容的提问来源于stack exchange，提问作者Trisma