React，ANTD：onChange 调用了两次

Question

ANTD Upload.Dragger 调用了两次 onChange 函数。我不知道该怎么办，因为我尝试了很多我认为有用的变体。

<Item
                    name='mainImage'
                    rules={getRule('Main Image', 'mainImage')}
                  >
                    <Dragger
                      accept='image/png, image/jpeg, image/svg, image/gif'
                      customRequest={onSuccess}
                      onChange={onFileChanged}
                      style={stylesDragger}
                      maxCount={1}
                    >
                      <div className='ant-upload-drag-icon'>
                        <CloudUploadOutlined size={20} />
                      </div>
                      <div className='ant-upload-text'><span>Click to upload</span> or drag and drop</div>
                      <div className='ant-upload-hint'>
                        SVG, PNG, JPG or GIF (max. 800x400px)<br /><br />Max 1 image
                      </div>
                    </Dragger>
                  </Item>

这是处理函数：

 const onFileChanged = async image => {
    if (isDenied(image?.type)) {
      return onNotifyDenied()
    }
    await dispatch(uploadAttachment(image.file))
  }

Answer 1

此行为可通过使用 beforeUpload 函数来解释。
该函数在 Uploader API 中有描述。这是：

Hook function which will be executed before uploading. Uploading will be stopped with false or a rejected Promise returned. When returned value is Upload.LIST_IGNORE, the list of files that have been uploaded will ignore it. Warning：this function is not supported in IE9

根据这个解释，我们应该通过向组件传递 false 语句来防止 beforeUpload 行为。

const beforeUpload = (file, fileList) => {
    // Access file content here and do something with it
    // console.log(file)

    // Prevent upload
    return false
  }

<Dragger
  accept='image/png, image/jpeg, image/svg, image/gif'
  beforeUpload={beforeUpload}
  onChange={onFileChanged}
  customRequest={onSuccess}
  style={stylesDragger}
  multiple={false}
  maxCount={1}
 >
  {...children}
 </Dragger>

React，ANTD：onChange 调用了两次

React, ANTD: onChange called twice

events

event-handling

reactjs

react-redux

antd