React组件报错‘Functions are not valid as a React child’及PlanetDetails不显示问题求助

嘿，我来帮你分析下问题所在！这个报错和组件不显示的问题，大概率是你对高阶组件（HOC）的使用方式出错了，咱们一步步来解决：

1. 先解决「Functions are not valid as a React child」核心报错 #

高阶组件的本质是接收组件并返回新组件的函数，你现在的代码里直接把HOC调用后的函数返回了，而没有把它作为React组件渲染（也就是用<Component />的形式）。

看你原来的代码：

return witdDetails(
  withChildFunc(ItemDetails, withChildDetails(arrPersonDetails)),
  getPerson
);

这里witdDetails（应该是withDetails的笔误？）返回的是一个组件构造函数，React没办法直接渲染函数，必须把它转换成组件实例才行。

修正后的代码应该是这样：

const PersonDetails = () => {
  return (
    <SwapiServiceConsumer>
      {({ getPerson }) => {
        // 先用HOC生成增强后的组件
        const EnhancedPersonDetails = witdDetails(
          withChildFunc(ItemDetails, withChildDetails(arrPersonDetails)),
          getPerson
        );
        // 以JSX标签的形式渲染组件实例
        return <EnhancedPersonDetails />;
      }}
    </SwapiServiceConsumer>
  );
};

2. 排查PlanetDetails不显示的问题 #

你提到PlanetList正常但PlanetDetails不显示，除了上面的HOC使用错误，还要检查这几点：

• 确认PlanetDetails组件是否和PersonDetails犯了同样的错误：直接返回HOC函数而不是渲染组件实例；
• 检查SwapiService的getPlanet方法是否能正常获取数据：可以在控制台打印getPlanet(id)的返回值，看是否拿到了正确的星球数据；
• 检查ItemDetails组件是否能正确接收props：比如HOC有没有把获取到的星球数据传递给ItemDetails，组件内部有没有条件渲染逻辑（比如数据没加载完时不显示）导致内容不可见；
• 核对HOC的拼写：比如witdDetails这种笔误，可能会导致HOC没有正确生效。

额外提醒 #

如果你的HOC是自己实现的，还要确认它的逻辑是否正确：比如withDetails是否会在内部发起数据请求，把获取到的数据通过props传递给被包装的组件；withChildFunc和withChildDetails是否正确处理了子组件的渲染逻辑，确保数据能正常展示出来。

备注：内容来源于stack exchange，提问作者Shuxrat Omonqulov