<input> 上的 prop `value` 的值无效标签 [英] Invalid value for prop `value` on <input> tag

问题描述

我收到无法解决的警告:

I am getting this warning that I can not resolve:

标签上的 prop value 的值无效.要么将其从元素，或传递字符串或数字值以将其保留在 DOM 中.详情

Invalid value for prop value on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details

以下是我使用的代码:

<FormItem validateStatus={NameError ? "error" : ""} help={NameError || ""}>
  {getFieldDecorator("Name", {
    initialValue: (()=>{this.state.Data.Name}),
    rules: [{ required: true, message: "Please input the component name!" }]
  })(
    <Input
      className="form-control"
      type="text"
      name="Name"
      defaultValue={this.state.Data.Name}
      onChange={this.onChange}
    />
  )}
</FormItem>

我的打字稿界面如下所示:

My typescript interfaces look like this:

export interface IFieldEdition{
    Data:IFieldData
}

export interface IFieldData{
    Id?:number,
    Name?:string,
    Value?:string,
    Description?:string,
    CreatedDate?:Date,
    CreatedBy?:string,
    StatusId?: number
}

我该如何解决这个问题?有什么线索吗?

How can I resolve this? Any clue?

推荐答案

我看到你在使用 antd 表单.来自antd表单官方文档:

I see you're using antd forms. From antd form official document:

被 getFieldDecorator 包裹后，value(或其他定义的属性)valuePropName) onChange(或触发器定义的其他属性)道具将被添加到表单控件中，将处理表单数据的流向通过 Form 这将导致:

After wrapped by getFieldDecorator, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls，the flow of form data will be handled by Form which will cause:

您不应该手动调用 setState，请使用this.props.form.setFieldsValue 以编程方式更改值.

You shouldn't call setState manually, please use this.props.form.setFieldsValue to change value programmatically.

您对 initialValue: (()=>{this.state.Data.Name} 的使用，它调用 setState 可能是您收到此错误的原因.

Your use of initialValue: (()=>{this.state.Data.Name}, which calls setState might be the reason you're getting this error.

这篇关于<input> 上的 prop `value` 的值无效标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！