React + Fetch API。无法在 setState 中设置响应

Question

我知道这个问题在这个网站上被问了很多次，但是在过去的5个小时里，我经历了这么多与此相关的问题，我不得不放弃，看看是否有人能确定我在这里做错了什么。

我在我的react应用程序中有一个获取请求，我成功地收到了响应，但我无法将响应存储在我的状态中。在我看来，一切看起来都是正确的，但当我试图存储响应时，它什么也不做。在浏览器中没有控制台错误，也没有在我的控制台运行react应用程序。目前相关代码看起来像这样(为了隐私，有些东西被稍微修改了)。

loginSubmission = () => {
fetch('https://genericsite.com/auth', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({"username": this.state.username, "password": this.state.password})
})
.then(res => res.json())
.then(res => {this.setState({response: res}, () => this.sendResponse())})
.catch(error => {
console.log(error);
});
}
sendResponse(){
console.log(this.state.response)
let data = {response: this.state.response};
this.props.receiveResponse(data);
}

如果我像下面那样做，虽然我能够console.log响应没有问题，但从我在类似问题中阅读的内容来看，console.log有一些东西强制它完成请求，以便它可以记录结果。

loginSubmission = () => {
fetch('https://genericsite.com/auth', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({"username": this.state.username, "password": this.state.password})
})
.then(res => res.json())
.then(res => {console.log('res.response'})
.catch(error => {
console.log(error);
});
}

返回以下对象:

{token: 'bigLongJumbledToken', idtoken: '', exp: 1655106045, username: 'myusername'}
exp: 1655106045
idtoken: ""
token: "bigLongJumbledToken"
username: "myusername"
[[Prototype]]: Object

我在这个组件中的状态是这样的:

this.state = {
username: '',
password: '',
response: {}
}
this.userOnChange = this.userOnChange.bind(this);
this.passOnChange = this.passOnChange.bind(this);
this.loginSubmission = this.loginSubmission.bind(this);
}

提前感谢你的帮助。

Answer 1

在这一行:.then(res => {this.setState({response: res}, () => this.sendResponse())})中，您使用两个参数调用setState，它应该只有一个。我认为你想要在状态中存储响应，并使用响应数据执行sendResponse函数，但是，即使在你修复了setState的调用之后，函数sendResponse将不会收到更新的状态，因为react将等待完成当前执行的函数，即.then()，然后才实际更新状态。

你有两种方法去做(我猜)你正在尝试做的事情:

第一:直接使用响应调用sendResponse

第二步:使用componentWillUpdate在状态更新后调用sendResponse

我将给出第一种方法的例子，因为我认为这是最干净的:

.then(res => {
this.setState({response: res})
this.sendResponse(response)
})
sendResponse(res){ // expects response as a parameter
console.log(this.state.response)
// let data = {response: this.state.response}; // avoid this
this.props.receiveResponse(res);
}