我觉得我错过了一些可能很愚蠢的东西。如果用户想要更改他们的头像照片，我会弹出一个模态表单。该函数正在运行并更新我的数据库，当我更改状态时它会变得一团糟......所以这是处理模态提交的函数：
onModalSubmit: function () {
let data = new FormData();
data.append('id', this.state.user._id)
data.append('image', this.refs.image.files[0])
axios.patch('/api/userphoto', data, {
'Content-Type': 'multipart/form-data'
}).then(function (response) {
console.log(response);
window.localStorage.setItem('user', JSON.stringify(response.data.user));
this.setState({ user: response.data.user, modalIsOpen: false });
}).catch(function (error) {
console.log(error);
})
}
这是模态：
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Change Photo"
>
<h2>Change Photo</h2>
<div className="field">
<div className="ui center icon input">
<input type="file" name="image" ref="image"/>
<button className="ui button" onClick={this.closeModal}>Cancel</button>
<button className="ui button" onClick={this.onModalSubmit}>Submit</button>
</div>
</div>
</Modal>
我已经尝试内联绑定这个函数，以及在构造函数中......但它只是告诉我另一个错误，它已经绑定到组件。
同样，该功能正在工作，它只是在服务器响应后挂断在 this.setState 上。
任何帮助表示赞赏，谢谢！
