Ant Design <Upload>组件调用setState时为何会取消上传请求？

最近用Ant Design做表单的时候遇到个头疼的问题，折腾了好久才搞定，来跟大家分享下：

• 我用Ant Design搭建了一个包含Upload组件的表单
• 结果每次上传图片，请求都会莫名其妙中断
• 排查后发现，是onChange回调里调用setState()导致请求中止了
• 代码还是直接抄的Ant Design官网的头像上传示例，没想到会出问题
• 卡在这浪费了超多时间……

下面是我当时的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload, Form, Icon } from 'antd';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

class AddBookForm extends React.Component {
  state = {
    loading: false,
  };

  handleChange = (info) => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // 实际项目中应该从接口响应里获取图片地址
      getBase64(info.file.originFileObj, imageUrl => this.setState({
        imageUrl,
        loading: false,
      }));
    }
  }

  render() {
    const formItemLayout = {
      labelCol: { xs: 24, sm: 2 },
      wrapperCol: { xs: 24, sm: 8 }
    };
    // 这里原本用了无状态函数组件定义FormItem
    const FormItem = function(props) {
      return <Form.Item {...formItemLayout} {...props}></Form.Item>;
    };

    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    const imageUrl = this.state.imageUrl;
    return (
      <Form layout="horizontal">
        <FormItem label="图片" extra="请上传2M以内的JPG图片">
          <Upload
            name='imageFile'
            action="/api/image-upload"
            onChange={this.handleChange}
            showUploadList={false}
            listType="picture-card"
            className="single-image-uploader"
          >
            {imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
          </Upload>
        </FormItem>
      </Form>
    );
  }
}

ReactDOM.render((
  <AddBookForm />
), document.getElementById('root'));

2018-05-25 更新：问题解决！ #

把原本定义的无状态函数组件FormItem改成类组件之后，上传中断的问题就完全消失了。修改后的FormItem代码如下：

class FormItem extends React.Component {
  render() {
    const formItemLayout = {
      labelCol: { xs: 24, sm: 2 },
      wrapperCol: { xs: 24, sm: 8 }
    };
    return <Form.Item {...formItemLayout} {...this.props}></Form.Item>
  }
}

内容的提问来源于stack exchange，提问作者qinyuanbin