Reactjs 为什么是ant.design<；上传>；设置状态时组件取消上载请求？ 我有一个使用ant.design的带有上传组件的表单 但是每次我上传一张图片，请求就被中止了 我找出了导致中止的onChange处理程序中的setState（）方法调用 代码是从ant.design网站复制的示例： 我不知道这里怎么了，我在这上面浪费了太多时间 这是我的代码，你可以试试

```

从“React”导入React；
从“react dom”导入react dom；
从“antd”导入{上传、表单、图标}；
函数getBase64（img，回调）{
const reader=new FileReader（）；
reader.addEventListener（'load'，（）=>回调（reader.result））；
reader.readAsDataURL（img）；
}
类AddBookForm扩展了React.Component{
状态={
加载：false，
};
handleChange=（信息）=>{
如果（info.file.status===‘上传’）{
this.setState（{loading:true}）；
返回；
}
如果（info.file.status===“完成”）{
//从现实世界中的响应获取此url。
getBase64（info.file.originFileObj，imageUrl=>this.setState({
imageUrl，
加载：false，
}));
}
}
render（）{
常量formItemLayout={labelCol:{xs:24，sm:2}，wrapperCol:{xs:24，sm:8}；
const FormItem=功能（道具）{
返回；
};
常量上载按钮=(
上传
);
const imageUrl=this.state.imageUrl；
返回(
{imageUrl？：上传按钮}
);
}
}
ReactDOM.render((
)，document.getElementById（'root'）；

更新2018-05-25： 这个问题在我将

组件从无状态功能组件更改为类组件后解决

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>
    }
}

类FormItem扩展了React.Component{
render（）{
常量formItemLayout={labelCol:{xs:24，sm:2}，wrapperCol:{xs:24，sm:8}；
返回
}
}

在

/api/image upload

@TomaszMularczyk运行的服务器肯定有问题，我希望如此，所以我不会在这方面花费太多时间，但服务运行正常，您尝试过我上面提供的在线演示吗？即使没有服务器，请求仍会中止。

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>
    }
}