使用React HOC后出现Functions are not valid as a React child警告如何解决？

问题原因 #

• 第一个核心错误：组件变量名不匹配
  你当前文件内定义的组件名为Button，但你传入withSubscription高阶组件的参数是CartButton，如果该变量未在当前文件正确导入，或者导入的CartButton本身是未执行的高阶组件（返回组件函数的函数），渲染时就会返回函数类型的值，触发你遇到的报错。
  如果你想要包装当前文件内定义的这个按钮组件，需要把导出代码改为：

export default withSubscription(Button, Pack.CLICK_COLLECT);

或者把组件定义的变量名改为CartButton：

const CartButton: FC = (props) => {
  // 原有组件逻辑
};
export default withSubscription(CartButton, Pack.CLICK_COLLECT);

• 第二个隐含错误：useMemo依赖缺失
  你的useMemo计算逻辑中用到了subscription变量，但没有把它加入依赖数组，会导致订阅状态更新后，组件不会重新判断显隐逻辑，需要修改为：

const subscriptionIndex = useMemo(() => subscription?.findIndex((subscriptionPack) => subscriptionPack === pack), [pack, subscription]);

• 第三个逻辑问题：透传属性未生效
  你调用组件时传入的onPress属性，没有在按钮组件内部使用，组件内直接写死了onPress={handleAddProduct}，会导致外部传入的点击事件不生效，如果需要支持外部传入点击事件，可以修改为：

const Button: FC<{onPress?: () => void}> = (props) => {
  return (
    <TouchableOpacity
      style={[
        styles.cartButtonContainer,
        { backgroundColor: primaryColor },
      ]}
      onPress={props.onPress || handleAddProduct}
    >
      <Icon
        name="cart-arrow-down"
        materialCom
        style={{ marginRight: 0 }}
        size={25}
        color={secondaryColor}
      />
    </TouchableOpacity>
  );
};

内容的提问来源于stack exchange，提问作者Toto NaBendo