代码之家 › 专栏 › 技术社区 › RamAlx

显示此错误的原因:“必须返回有效的react元素(或null)。您可能返回未定义的“

higher-order-components reactjs javascript

RamAlx · 技术社区 · 7 年前

我知道这个问题已经被回答了,但我就是无法处理到底出了什么问题。我有一个包装函数:

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时,即使主组件是组件,也会显示此错误: 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 />)

但还是同样的错误

2 回复 | 直到 7 年前

zkcro 7 年前

这里的元素和组件看起来很混乱。您传递的是元素(要呈现的实际输出),而hoc是一个组件(通常接受一组属性并返回一个元素的函数)。您正在将一个元素传递给hoc,因此当它(在hoc render函数中)尝试呈现它时,它无法呈现它,您会得到错误。

要修复,首先需要 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 />);
};

(我不认为这是最好的方法,我只是尽量接近你的代码。一旦你开始重组它,如果你更清楚地知道你想做什么,你可能会找到一个更好的方法来组织它。)

hamidreza nikoonia Quoc Ly 7 年前

你的返回方法有问题,第一步你必须知道当你想打临时电话时,你必须这样写

  return withTracker(MainComponent, props.partnerTrackingCode)

而是这个

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

删除()

然后再检查一下,如果你还有错误,告诉我