Recompose高阶组件（HOC）无法渲染子组件求助

看起来你在把逻辑迁移到HOC时踩了典型的坑，我帮你梳理几个最可能的遗漏点：

1. HOC未正确返回包裹子组件的增强组件 #

从你给出的代码片段看，你的HOC是「函数返回函数」的嵌套结构，但如果内部没有返回一个能接收props并渲染子组件的增强组件，自然不会渲染MainReduxForm。

正确的基础结构应该是这样：

export default () => MainFormContainer => {
  // 用compose组合HOC逻辑
  const EnhancedComponent = compose(
    connect(state => {
      // 注意：formValueSelector必须传入对应redux-form的表单名称
      const selector = formValueSelector('your_form_unique_name');
      return {
        // 提取你需要的表单值
        targetFieldValue: selector(state, 'targetField')
      };
    }),
    lifecycle({
      componentDidMount() {
        // 你的生命周期逻辑
      }
    })
  )(MainFormContainer);

  // 必须返回这个增强后的组件
  return EnhancedComponent;
};

2. 未将props传递给子组件 #

如果你的HOC自定义了包裹组件，一定要把接收的所有props传递给子组件，否则子组件可能因缺少必要属性而无法渲染：

const WrappedComponent = props => {
  // 你的自定义逻辑
  return <MainFormContainer {...props} />; // 展开props是关键
};

3. HOC调用方式错误 #

你可能在使用HOC时没有正确完成两次调用（外层函数+传入子组件），正确的使用姿势应该是：

// 假设你的HOC文件名为formEnhancer.js
import formEnhancer from './formEnhancer';
import MainReduxForm from './MainForm';

// 先执行外层函数，再传入子组件得到增强后的表单组件
const EnhancedReduxForm = formEnhancer()(MainReduxForm);

export default EnhancedReduxForm;

4. compose顺序或redux-form配置错误 #

• compose的执行顺序是从右到左，如果你的lifecycle需要用到connect传递的props，要把connect放在compose的右侧，lifecycle放在左侧：

  compose(
    lifecycle({...}), // 先执行这个，能拿到connect传递的props
    connect(...)
  )(MainFormContainer)
  

• 确保formValueSelector传入的表单名称，和MainReduxForm中reduxForm配置的form属性完全一致，否则无法正确获取表单值，可能导致组件异常。

如果能补充HOC内部的完整代码，我可以更精准地定位问题，但上面这几点是这类场景下最常见的遗漏项，你可以先逐一排查。

内容的提问来源于stack exchange，提问作者Shawn Matthews