React antd Upload input required error with default list答案

【问题标题】：React antd Upload input required error with default listReact antd Upload input required error with default list
【发布时间】：2019-12-23 11:57:36
【问题描述】：

我在我的应用程序中使用antd UI 框架。另外，我有 form 和所需的 Upload 图像字段。有时这个字段有defaulList。问题是在定义defaultList 时仍然没有通过验证。

Upload道具：

const uploadProps = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`)
      }
    },
    defaultFileList: [
      {
        uid: '1',
        name: 'xxx.png',
        status: 'done',
        response: 'Server Error 500', // custom error message to show
        url: 'http://www.baidu.com/xxx.png',
      },
  }

输入：

 {formItem(
   props.form.getFieldDecorator('Image', {
     rules: [{ required: true }],
       })(
         <Upload {...uploadProps}>
           <Button>
             <Icon type="upload" /> Click to Upload
           </Button>
         </Upload>,
        ),
        {
          label: 'Image',
        },
      )}

submit 之后出现验证错误。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您不应将defaultFileList 与getFieldDecorator 一起使用。

Antd 对此提出警告

警告：defaultFileList 无效，getFieldDecorator 将设置 fileList，请改用option.initialValue。

将 defaultFileList 数组移动到 getFieldDecorator 选项的 initialValue 字段。

 {formItem(
   props.form.getFieldDecorator('Image', {
     rules: [{ required: true }],
     initialValue: [
      {
        uid: '1',
        name: 'xxx.png',
        status: 'done',
        response: 'Server Error 500', // custom error message to show
        url: 'http://www.baidu.com/xxx.png',
      },
      ]
       })(
         <Upload {...uploadProps}>
           <Button>
             <Icon type="upload" /> Click to Upload
           </Button>
         </Upload>,
        ),
        {
          label: 'Image',
        },
      )}

【讨论】：