好的，忘记回调，我去过那里，不再有CALLBACK HELL。
始终使用 Promise，您可以使用 async/await 来简化一切：
async function fetchAPI(methodType, url, data){
try {
let result = await fetch(url, {
method: methodType,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}); // wait until request is done
let responseOK = response && response.ok;
if (responseOK) {
let data = await response.json();
// do something with data
return data;
} else {
return response;
}
} catch (error) {
// log your error, you can also return it to handle it in your calling function
}
}
在你的 React 组件中：
async someFunction(){
let result = await fetchAPI("POST", Constants.LOGIN, data); // wait for the fetch to complete
if (!result.error){
// get whatever you need from 'result'
this.props.history.push("/home");
} else {
// show error from 'result.error'
}
}
现在您的代码看起来更具可读性！
fetch 的错误在 result.error 或 result.statusText 中，我很久以前就停止使用 fetch，切换到 Axios。看看我对 2 Here 之间的一些差异的回答。
根据您的回复进行编辑
好的，根据您发布的代码：
import React from "react";
import Constants from "../Constants.jsx";
import { withRouter } from "react-router-dom";
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
errors: []
};
}
showValidationErr(elm, msg) {
this.setState(prevState => ({
errors: [...prevState.errors, { elm, msg }]
}));
}
clearValidationErr(elm) {
this.setState(prevState => {
let newArr = [];
for (let err of prevState.errors) {
if (elm != err.elm) {
newArr.push(err);
}
}
return { errors: newArr };
});
}
onEmailChange(e) {
this.setState({ email: e.target.value });
this.clearValidationErr("email");
}
onPasswordChange(e) {
this.setState({ password: e.target.value });
this.clearValidationErr("password");
}
submitLogin(e) {
e.preventDefault();
const { email, password } = this.state;
if (email == "") {
this.showValidationErr("email", "Email field cannot be empty");
}
if (password == "") {
this.showValidationErr("password", "Password field cannot be empty");
}
if (email != "" && password != "") {
var data = {
username: this.state.email,
password: this.state.password
};
// I added function keyword between the below line
async function someFunction(){
let result = await fetchAPI("POST", Constants.LOGIN, data); // wait for the fetch to complete
if (!result.error){
this.props.history.push("/home"); // Here is the error
} else {
// show error from 'result.error'
}
}
someFunction();
}
}
render() { ......................
####-----This is function definition------####
async function fetchAPI(methodType, url, data){
try {
let response = await fetch(url, {
method: methodType,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}); // wait until request is done
let responseOK = response && response.ok;
if (responseOK) {
let data = await response.json();
// do something with data
return data;
} else {
return response;
}
} catch (error) {
return error;
// log your error, you can also return it to handle it in your calling function
}
}
这就是想法，您应该将async 设为调用API 的函数。在您的示例中，您的函数 submitLogin 必须是异步的，因为它将在内部调用异步函数。只要您调用异步函数，调用者必须是异步的，或者相应地处理承诺。应该是这样的：
async submitLogin(e) {
e.preventDefault();
const { email, password } = this.state;
if (email == "") {
this.showValidationErr("email", "Email field cannot be empty");
}
if (password == "") {
this.showValidationErr("password", "Password field cannot be empty");
}
if (email != "" && password != "") {
var data = {
username: this.state.email,
password: this.state.password
};
let result = await fetchAPI("POST", Constants.LOGIN, data); // wait for the fetch to complete
if (!result.error) {
this.props.history.push("/home"); // Here is the error
} else {
// show error from 'result.error'
}
}
如果函数在构造函数中正确绑定，this 不会有任何问题。您似乎没有在构造函数中绑定submitLogin 函数，这会给您带来this 的上下文问题。应该是这样绑定的：
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
errors: []
};
// bind all functions used in render
this.submitLogin = this.submitLogin.bind(this);
}
查看this article 以了解有关this 上下文问题的更多信息。
现在，根据您提供的代码，在我看来，您处于未知领域。如果你觉得路由很难或者 async/await 不清楚，我建议你不要使用它们，先掌握 React 基础知识（你遇到的语法问题是一个例子，你不应该有把那个函数放在那里，还有this的绑定问题）。
例如，阅读this post 以了解总体思路，我还建议您在使用异步、获取或路由之前尝试其他更简单的示例。当你清楚 React 生命周期后，你可以从那里继续，使用异步函数，然后是路由器。
我还建议您按照Official docs 中的示例，同时查看at this post 以更好地了解async/await。
这些建议当然是为了让你能够以清晰的基础掌握 React，并且在未来的基础上不会有任何问题！ :)