为什么显示此错误：“必须返回有效的 React 元素（或 null）。您可能返回了未定义的”答案

【问题标题】：Why this error is showing: "A valid React element (or null) must be returned. You may have returned undefined"为什么显示此错误：“必须返回有效的 React 元素（或 null）。您可能返回了未定义的”
【发布时间】：2018-06-28 22:41:52
【问题描述】：

我知道这个问题已经得到解答，但我无法处理出了什么问题。我有一个包装函数：

const withTracker = (WrappedComponent, partnerTrackingCode, options = {}) => {
  const trackPage = (page) => {
    ReactGA.set({
      page,
      options
    });
    ReactGA.pageview(page);
  };

  class HOC extends Component {
    componentDidMount() {
      ReactGA.initialize(partnerTrackingCode);
      const page = this.props.location.pathname;
      trackPage(page);
    }

    componentWillReceiveProps(nextProps) {
      const currentPage = this.props.location.pathname;
      const nextPage = nextProps.location.pathname;

      if (currentPage !== nextPage) {
        trackPage(nextPage);
      }
    }

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

  return HOC;
};

export default withTracker;

我在这里称呼它：

export default (props) => {
  const MainComponent = (
    <div>
      ...
    </div>
  );
  if (props.partnerTrackingCode) {
    return (
      withTracker(MainComponent, props.partnerTrackingCode)
    );
  }
  return (<div />);
};

当定义跟踪代码并调用 withTracker 时，即使 mainComponent 是一个组件，它也会向我显示此错误：A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object 我也尝试用空 div 替换 WrappedComponent：

return(<div />)

但还是同样的错误

【问题讨论】：

建议：不要多次退货。将它们存储在一个变量中并有一个返回 () 将它们连接在一起

标签： javascript reactjs higher-order-components

【解决方案1】：

看起来您在这里混淆了元素和组件。您正在传递元素（您想要呈现的实际输出），而 HOC 是一个组件（一个通常采用一组道具并返回一个元素的函数）。您正在将一个元素传递给您的 HOC，因此当它尝试渲染它时（在 HOC 渲染函数中）它无法渲染它并且您会收到错误。

要修复，您首先需要将您的 MainComponent 变成一个实际的组件，而不仅仅是您希望它返回的元素，例如：

const MainComponent = props => (
  <div>
    ...
  </div>
)

然后将它与你想要包装的包装器一起使用，然后渲染它：

if (props.partnerTrackingCode) {
  const MainWithTracker = withTracker(MainComponent, props.partnerTrackingCode)
  return <MainWithTracker />;
}

这有点奇怪，因为你需要在你的渲染方法中创建被包装的组件，这不是你通常做的事情。更改您的 HOC 可能更有意义，以便它返回一个将 partnerTrackingCode 作为道具而不是您的 HOC 的参数的组件。大致如下：

// your HOC (omitting irrelevant bits)
const withTracker = (WrappedComponent, options = {}) => {

  ...

  class HOC extends Component {
    componentDidMount() {
      ReactGA.initialize(this.props.partnerTrackingCode);
      ...
    }

    ...

    render() {
      // pull out the tracking code so it doesn't get passed through to the
      // wrapped component
      const { partnerTrackingCode, ...passthrough } = this.props;
      return <WrappedComponent {...passthrough} />;
    }
  }

  return HOC;
};

// in your component
const MainComponent = props => (
  <div>
    ...
  </div>
);
const MainWithTracker = withTracker(MainComponent);

export default (props) => {
  if (props.partnerTrackingCode) {
    return (<MainWithTracker partnerTrackingCode={props.partnerTrackingCode} />);
  }
  return (<div />);
};

（我认为这不是最好的方法，我只是尝试尽可能地接近您的代码。一旦您开始重构它，并更好地了解您正在尝试的内容你可能会找到更好的组织方式。）

【讨论】：

【解决方案2】：

你的退货方式有问题，第一步你必须知道当你想调用 HOC 时，你必须这样写

  return withTracker(MainComponent, props.partnerTrackingCode)

而不是这个

  return (
  withTracker(MainComponent, props.partnerTrackingCode)
  );

删除()

然后再次检查，如果仍然有错误告诉我

【讨论】：