1. wrote a form in ant.design and found that the request to upload the component was inexplicably interrupted, resulting in the picture not being uploaded.
2. after debugging, it is found that the component"s setSteta ({loading: true}) method causes the component"s unmount, to cause the requested abort
The state of the
3. component is listening to the onchange event of the upload, comment out the onchange event, and the problem can be solved
4. but cannot change the state in onchange (or it is obviously unreasonable to trigger an action), when using state management such as redux)
The
5. code is as follows (in fact, it is written according to the column given on the official website: https://ant.design/components.), online demo: https://codesandbox.io/s/wopv.:

                        <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"));

this problem has been bothering me for a long time. Please give me some advice on how to solve this problem.