Reactjs history.push在提取回调中不工作

我正在开发simple react js应用程序，我正在验证用户，如果他/她已成功登录，我将尝试重定向到主页，但我遇到了一些奇怪的情况。请帮我通过下面的代码

下面是使用一些输入参数调用服务器的函数

fetchAPI

的代码

function fetchAPI(methodType, url, data, callback){

    fetch(url,{
        method: methodType,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)  
    })
    .then(response => response.json())
    .then(data => callback(data) )
    .catch(error => callback(data));  

}

现在我这样称呼它

fetchAPI("POST", Constants.LOGIN, data, function(callback) {
        if(callback.status == 200) {
            console.log(callback.message);
            this.props.history.push("/home");
        }else if( typeof callback.status != "undefined"){
            alertModal("Alert", callback.message);
        }
      });

问题是它没有像响应条件中提到的那样重定向到

/home

，而是只打印成功消息。 但是当我直接使用下面代码中的FetchAPI时，它会将我重定向到

/home

有人能帮我解决为什么我会这样吗？？

fetch(Constants.LOGIN, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => response.json())
        .then(data => {
          if (data.status == 200) {
            this.props.history.push("/home");
          } else if (typeof data.status != "undefined") {
            alertModal("Alert", data.message);
          }
        })
        .catch(error => callback(data));

---

好吧，别提回电了，我已经去过了，再也没有了

始终使用承诺，您可以通过使用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，现在切换到了。看看我对这两个问题的一些不同的回答

根据您的回复进行编辑

好的，根据您发布的代码：

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

这就是想法，您应该将调用API的函数设置为

async

。在您的示例中，函数

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

如果函数在构造函数中被正确绑定，那么

这个

就不会有任何问题。您似乎没有在构造函数中绑定

submitLogin

函数，这将给您带来

此

上下文的问题。这就是它应该被绑定的方式：

constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      errors: []
    };

    // bind all functions used in render
    this.submitLogin = this.submitLogin.bind(this);
  }

查看以了解有关此

上下文的问题的更多信息

现在，根据你提供的代码，在我看来，你处在一个未知的领域。如果您认为路由很难或异步/等待不清楚，我建议您不要使用它们，首先掌握React基础知识（您遇到的语法问题就是一个例子，您不应该将该函数放在那里，还有
this
的绑定问题）

例如，阅读一下，了解一下一般的想法，我还建议您在使用异步、获取或路由之前尝试其他更简单的示例。当您弄清楚React生命周期时，您可以从那里继续，使用异步函数，然后使用路由器

我还建议您按照中的示例进行操作，并了解如何更好地理解async/await

当然，给出这些建议是为了让您能够掌握清晰的基本原理，并且将来在基本原理方面不会有任何问题！：）
 在您的
fetchAPI
调用中，
this
似乎与上下文无关。日志或控制台中是否有任何错误？没有，除了
console.log（callback.message）之外，控制台中没有任何错误好的，谢谢你的回复，我一定会试试这个。嘿，很抱歉，他们的语法错误在你的调用函数代码中这里
async someFunction（）{
您的答案几乎没有语法错误，我已经在代码中更正了。现在，我的控制台中出现了此错误
这是未定义的
行
此.props.history..
@AbhiBurk
异步someFunction（）中没有语法错误{
如果该函数在React组件中使用。此外，只要您正确使用路由器，
此
应该不会有任何问题。您如何使用我提供的解决方案？您可以将最终代码或原始问题上传到某个地方吗？当然，我可以上传到某个地方