React设置persistVariablesLimit默认值触发trim is not a function错误如何解决

问题根源 #

报错的核心原因是变量类型不匹配：

• 字段初始化、手动输入时persistVariablesLimit都是字符串类型，而选中FA模板设置默认值时，直接给该字段赋值了数字类型的50
• 后续表单校验逻辑里直接调用了只有字符串类型才支持的trim()方法，数字类型调用不存在的方法就会触发TypeError
• 若后端API返回的tmpLicense中该字段为数字类型，也会触发同样的报错

修复方案 #

方案1：设置默认值时统一使用字符串类型（适配现有逻辑） #

修改handleSelectTemplateChange里的默认值赋值逻辑，把数字50改成字符串'50'，和字段初始化的类型保持一致：

if (str1.startsWith('FA')) {
    item.family = 'Field Analytics'
    item.product = 'Field Analytics'
    if (!item.persistVariablesLimit) {
        item.persistVariablesLimit = '50'; // 数字改为字符串类型
    }
    if (!item.dataSourceLimit) {
        item.dataSourceLimit = '50'; // 同步修改另一个同类型字段
    }
}

方案2：校验逻辑增加类型兼容处理（更健壮，推荐） #

在校验调用trim前先把值转为字符串，覆盖API返回数字、默认值设为数字等所有可能的类型不匹配场景：

if (typeof item.persistVariablesLimit !== 'undefined') {
    // 先统一转字符串再调用trim
    item.persistVariablesLimit = String(item.persistVariablesLimit).trim()
    if (!item.persistVariablesLimit.match(/^[0-9]+$/)) {
        formIsValid = false
        errors['persistVariablesLimit'] = 'Must be numeric'
    }
}

两种方案可同时使用，双重保障避免同类问题复发。

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