1. 用ant.design寫了一個(gè)表單發(fā)現(xiàn)上傳組件的請(qǐng)求總是被莫名中斷，導(dǎo)致圖片無(wú)法上傳。
2. 調(diào)試后發(fā)現(xiàn)組件的setSteta({ loading: true })方法導(dǎo)致了組件的unmount，導(dǎo)致了請(qǐng)求的abort
3. 組件的狀態(tài)在監(jiān)聽(tīng)的upload的onchange事件，注釋掉onchange事件，問(wèn)題得以解決
4. 但是不能再onchange里面改變狀態(tài)（或者使用redux等狀態(tài)管理時(shí)觸發(fā)一個(gè)action），明顯不太合理
5. 代碼如下（其實(shí)就是按照官網(wǎng)給的列子寫的：https://ant.design/components...）,在線demo：https://codesandbox.io/s/wopv...:

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) => {
        console.log(info)
        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 => this.setState({
                imageUrl,
                loading: false,
            }));
        }
    }

    render() {
        const formItemLayout = { labelCol: { xs: 24, sm: 2 }, wrapperCol: { xs: 24, sm: 8 } };
        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="請(qǐng)上傳2M以內(nèi)的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'));

這個(gè)問(wèn)題已經(jīng)困擾了我非常久的時(shí)間，請(qǐng)各位大神指導(dǎo)一下如何解決這個(gè)問(wèn)題。