title: Why ant.design <Upload> component cancel upload request when setState?
body: <ol>
  <li>I have a form with upload component using ant.design</li>
  <li>But every time I upload an image, the request aborted.</li>
  <li>I figure out the <code>setState()</code> method call in the <code>onChange</code> handler caused the abort.</li>
  <li>The code was copied from the ant.design website example: <a href="https://ant.design/components/upload-cn/#components-upload-demo-avatar" rel="nofollow noreferrer">https://ant.design/components/upload-cn/#components-upload-demo-avatar</a></li>
  <li>I don't know what's wrong here, I wasted too much time on this...</li>
  <li>this is my code, you can try on <a href="https://codesandbox.io/s/wopv2xn1k5" rel="nofollow noreferrer">https://codesandbox.io/s/wopv2xn1k5</a></li>
  </ol>
  
  <p>```</p>
  
  <pre><code>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', () =&gt; callback(reader.result));
      reader.readAsDataURL(img);
  }
  
  class AddBookForm extends React.Component {
      state = {
          loading: false,
      };
  
      handleChange = (info) =&gt; {
          if (info.file.status === 'uploading') {
              this.setState({ loading: true });
              return;
          }
          if (info.file.status === 'done') {
              // Get this url from response in real world.
              getBase64(info.file.originFileObj, imageUrl =&gt; this.setState({
                  imageUrl,
                  loading: false,
              }));
          }
      }
  
      render() {
          const formItemLayout = { labelCol: { xs: 24, sm: 2 }, wrapperCol: { xs: 24, sm: 8 } };
          const FormItem = function(props) {
              return &lt;Form.Item {...formItemLayout} {...props}&gt;&lt;/Form.Item&gt;;
          };
          const uploadButton = (
              &lt;div&gt;
                  &lt;Icon type={this.state.loading ? 'loading' : 'plus'} /&gt;
                  &lt;div className="ant-upload-text"&gt;Upload&lt;/div&gt;
              &lt;/div&gt;
          );
          const imageUrl = this.state.imageUrl;
  
          return (
              &lt;Form layout="horizontal"&gt;
                  &lt;FormItem label="图片" extra="请上传2M以内的JPG图片"&gt;
                          &lt;Upload
                              name='imageFile'
                              action="/api/image-upload"
                              onChange={this.handleChange}
                              showUploadList={false}
                              listType="picture-card"
                              className="single-image-uploader"
                          &gt;
                              {imageUrl ? &lt;img src={imageUrl} alt="" /&gt; : uploadButton}
                          &lt;/Upload&gt;
                  &lt;/FormItem&gt;
              &lt;/Form&gt;
          );
      }
  }
  
  ReactDOM.render((
      &lt;AddBookForm /&gt;
  ), document.getElementById('root'));
  </code></pre>
  
  <h3>UPDATE 2018-05-25:</h3>
  
  <p>This problem solve after I change the <code>&lt;FormItem&gt;</code> Component from Stateless Functional Component to a class component.</p>
  
  <pre><code>class FormItem extends React.Component {
      render() {
          const formItemLayout = { labelCol: { xs: 24, sm: 2 }, wrapperCol: { xs: 24, sm: 8 } };
          return &lt;Form.Item {...formItemLayout} {...this.props}&gt;&lt;/Form.Item&gt;
      }
  }
  </code></pre>