Question

我正在开发一个用于对用户进行身份验证的简单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，而是仅打印成功消息。但是，当我像下面的代码一样直接使用fetch api时，会将我重定向到/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));

Answer 1

好的，忘了回调，我去过那里，不再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'
    }
}

现在您的代码看起来更具可读性！

提取中的错误出现在result.error或result.statusText中，我很久以前就停止使用提取，切换到Axios。看看我对两个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必须是异步的，因为它将在内部调用异步函数。只要您调用异步函数，调用方就必须是异步的，或相应地处理Promise。应该是这样的：

  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以更好地了解异步/等待。

当然会给出这些建议，以便您以明确的基础知识来掌握React，并且将来在基础方面不会有任何问题！：）

history.push在获取回调中不起作用

1 个答案: