为什么显示此错误："A valid React element (or null) must be returned. You may have returned undefined"

Question

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

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 />)

但还是一样的错误

Answer 1

你的问题在你的return方法中，第一步你必须知道当你想调用 HOC 时，你必须这样写

  return withTracker(MainComponent, props.partnerTrackingCode)

而不是这个

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

移除()

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

Answer 2

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

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

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

然后将其与您想要包装并呈现的包装器一起使用：

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

虽然这有点奇怪，因为您需要在渲染方法中创建包装组件，这不是您通常做事的方式。更改您的 HOC 可能更有意义，这样它 return 是一个将 partnerTrackingCode 作为 prop 而不是 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 />);
};

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

为什么显示此错误："A valid React element (or null) must be returned. You may have returned undefined"

Why this error is showing: "A valid React element (or null) must be returned. You may have returned undefined"

javascript

reactjs

higher-order-components