使用HOC导出React Class组件时的TypeScript错误修复咨询

错误原因 #

错误根源在getDerivedStateFromProps静态方法：当resourceType与prevState.activeResourceType相等时，函数没有返回任何值，默认返回undefined。但React的TypeScript类型定义要求该方法的返回值必须是Partial<HomePageStateProps> | null，undefined不在允许的类型范围内，导致connect高阶组件的类型校验不通过。

修复建议 #

方案1：条件不满足时返回null #

在getDerivedStateFromProps中，当不需要更新state时，明确返回null：

static getDerivedStateFromProps(nextProps: Props, prevState: HomePageStateProps) {
    const { match : { params : { resourceType } } = { params : { resourceType: resourceTypeEnum.SIM_CARDS }} } = nextProps;
    if (!isEqual(resourceType, prevState.activeResourceType)) {
        return { ...prevState, activeResourceType:  resourceType }
    }
    // 新增：条件不满足时返回null
    return null;
}

方案2：添加明确的返回类型注解 #

给getDerivedStateFromProps指定返回类型，强制约束返回值符合要求：

static getDerivedStateFromProps(nextProps: Props, prevState: HomePageStateProps): Partial<HomePageStateProps> | null {
    const { match : { params : { resourceType } } = { params : { resourceType: resourceTypeEnum.SIM_CARDS }} } = nextProps;
    if (!isEqual(resourceType, prevState.activeResourceType)) {
        return { ...prevState, activeResourceType:  resourceType }
    }
    return null;
}

额外优化（可选） #

HomePageStateProps中activeResourceType定义为可选，但组件state初始化时一定会给它赋值，且后续更新也不会变为undefined，可以将其改为必填：

interface HomePageStateProps {
    activeResourceType: string; // 去掉?，改为必填
}

这能避免后续state使用时的可选性校验问题。

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