reactjs - TypeError：在 ReactJS HOC 上进行撰写时，Object(...) 不是函数

Question

我有一个组件，我尝试编写（从“compose-function”库导入）如下；

export function MyRoute() {
  let MyGridWithData = compose(
    withRouter,
    withTranslation("translations"),
    withMyApi()
  )(MyGrid);
  return <MyGridWithData />;
}

但是，由于某种原因，我看到以下错误；

TypeError: Object(...) is not a function

错误指出在行上；让 MyGridWithData = compose(...)

此外，虽然 withRouter 和 withTranslation 是标准钩子，但 withMyApi 定义如下（基本上是 HOF）；

export function withMyApi() {
  // Extra function wrapper 
  return function(WrappedComponent) {
    class MyApiUrls extends React.Component {
      constructor(props) {
        super(props);
      }

      render() {
        return <WrappedComponent api={this.api} {...this.props} />;
      }
    }
    return MyApiUrls;
  };
}

Answer 1

一切看起来都是正确的，除了；可能您错误地导入了撰写功能。

它是默认导出，而不是命名导出。所以，正确的导入方式是：

import compose from 'compose-function';

---

旁注：不要在 render 方法中使用 HOC，因为它类似于在每次 re-render 时重新创建一个组件。所以，你应该把它写成：

const MyGridWithData = compose(
    withRouter,
    withTranslation("translations"),
    withMyApi()
  )(MyGrid);

export function MyRoute() {
  // more code if any
  return <MyGridWithData />;
}