React JS 未处理的拒绝（TypeError）：item.persistVariablesLimit.trim 不是一个函数

Question

我收到以下错误：

React JS Unhandled Rejection (TypeError): item.persistVariablesLimit.trim is not a function

当我尝试在 persistVariablesLimit 上设置默认值时。

这是堆栈跟踪和控制台日志的图像：

这是生成它的代码：

    if (typeof item.persistVariablesLimit !== 'undefined') {
        item.persistVariablesLimit = item.persistVariablesLimit.trim()
        if (!item.persistVariablesLimit.match(/^[0-9]+$/)) {
            formIsValid = false
            errors['persistVariablesLimit'] = 'Must be numeric'
        }
    }

如果是手动输入数据，这个字段是没有问题的，即使输入了，然后删除。

此外，如果我没有设置默认值，也没有在字段中输入任何内容，它会成功保存为空字符串。

这是设置默认值的地方（选择“ FA”模板时）：

handleSelectTemplateChange = (event, { value }) => {
    let item = { ...this.state.item }
    item.template = value
var str1 = '' + item.template

if (str1.startsWith('SMA')) {
    item.family = 'Safety-Machine-Analytics'
}
if (str1.startsWith('FA')) {
    item.family = 'Field Analytics'
    item.product = 'Field Analytics'
    if (!item.persistVariablesLimit) {
        item.persistVariablesLimit = 50;
    }
    if (!item.dataSourceLimit) {
        item.dataSourceLimit = 50;
    }
}
else {
        item.persistVariablesLimit = "";
        item.dataSourceLimit = "";
}


this.setState({ item })
}

这是模板的 UI 代码：

                    <Form.Select
                        fluid
                        label='Template'
                        options={this.state.templateOptions || []}
                        placeholder='Template'
                        name='template'
                        value={item.template}
                        required={true}
                        onChange={this.handleSelectTemplateChange}
                    />

对于 persistVariableLimit 字段：

                    <Form.Input
                        label='Persist Variables Limit'
                        placeholder='Persist Variables Limit'
                        name='persistVariablesLimit'
                        value={item.persistVariablesLimit || ''}
                        onChange={this.handleChange}
                        required={false}
                        disabled={false}
                        error={this.state.errors['persistVariablesLimit']}
                    />

这是最初从 API 中检索到的项目。初始化如下：

emptyItem = {
    fullName: '',
    contact: '',
    requester: '',
    tag: '',
    company: '',
    companyId: '',
    product: '',
    expiration: '',
    macsArray: '',
    dashboardIDs: '',
    typeId: '',
    family: '',
    systems: '',
    fileName: '',
    url: '',
    attributesArray: [],
    persistVariablesLimit: '',
    dataSourceLimit: ''
} 

constructor(props) {
    super(props)
    const { cookies } = props

this.state = {
    item: this.emptyItem,
    csrfToken: cookies.get('XSRF-TOKEN'),
    fields: {},
    errors: {}
}
...

}

这是 API 调用：

    if (this.props.match.params.id !== 'new') {
        try {
            const tmpLicense = await (await fetch(API_HOST + `/api/license/${this.props.match.params.id}`, { credentials: 'include' })).json()

            this.setState({ item: tmpLicense })

        } catch (error) {
            this.props.history.push('/')
        }

我应该如何设置这个默认值？这里有什么问题？

Answer 1

您将默认值设置为数字，.trim 是一个字符串方法。

应该是：

    if (!item.persistVariablesLimit) {
        item.persistVariablesLimit = '50';
    }
    if (!item.dataSourceLimit) {
        item.dataSourceLimit = '50';
    }

React JS 未处理的拒绝（TypeError）：item.persistVariablesLimit.trim 不是一个函数

React JS Unhandled Rejection (TypeError): item.persistVariablesLimit.trim is not a function

variables

default

undefined

reactjs