Upload 组件只调用了一次 onChange 函数

[al002]

本地环境

• antd 版本: 1.6.5
• 操作系统及其版本：Ubuntu 16.4
• 浏览器及其版本: Chromium 51.0.2704.79

你做了什么？

在 Form 中使用 Upload 组件

onPicUploaded = (e) => {
  console.log(e.file.status)
}

const uploadProps = {
  name: 'file',
  action: '/api/upload',
  listType: 'picture',
  accept: 'image/*',
  onChange: this.onPicUploaded,
  fileList: uploaded_files.map((e, i) => {
    const list = e;
    list.uid = i;
    list.status = 'done';
    list.thumbUrl = e.url;
      return list;
    }),
};

<Form>
  <FormItem
    {...formItemLayout}
    label="上传协议文件"
  >
    <Upload
      {...uploadProps}  
    >
      <Button type="ghost">
        <Icon type="upload" /> 点击上传
      </Button>
    </Upload>
  </FormItem>
</Form>

其中 uploaded_files 是 redux store 里的，默认为空数组，api 请求后填充。

上传的 Api 会正常返回。

你期待的结果是：

onChange 函数被多次调用，直到 e.file.status === 'done'

实际上的结果：

只调用了一次 onChange， e.file.status === 'uploading'

另一种结果：

如果把 fileList 修改为 defaultFileList，则默认图片不会显示，但是上传功能就正常了

[afc163]

先搜索。

[afc163]

#2423

[afc163]

https://facebook.github.io/react/docs/forms.html#controlled-components

[al002]

这里手动触发了 redux action
上面的 uploaded_files在项目里的实际名字是display_number_files
display_number_files嵌套在另一个 object 内

onPicUploaded = (e) => {
  this.props.updateVoipFields({
    fields: {
      display_number_files: {
        name: 'display_number_files',
        value: e.fileList.slice(0, 2).map(file => ({
          uid: file.uid,
          name: file.name,
          url: file.response ? file.response.data : '',
        })),
      },
    },
  });

  if (e.fileList && e.fileList.length > 2) {
    e.fileList.shift();
  }

  if (e.file.status === 'done') {
    if (e.file.response.code === 200) {
      this.props.updateVoipFields({
        fields: {
          display_number_files: {
            name: 'display_number_files',
            value: e.fileList.slice(0, 2).map(file => ({
              uid: file.uid,
              name: file.name,
              url: file.response.data,
            })),
          },
        },
      });
    } else {
      message.error(e.file.response.msg);
    }
  }
}

子组件和这个组件也被重新 render 了，但是 onChange 还是只触发了一次

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.