Question

我正在开发ReactJS应用。

我遇到以下错误“ TypeError：undefined不是对象（正在评估'_this.props.auth（values.username，values.password）.then'）”。

当“ return new Promise”位于“ then”之外时，它将正常工作。尽管如此，我只想在两个第一个“ then”之后返回承诺。

loginActions.js的示例

export const auth = (username, password) => dispatch => {
  fetch('http://localhost/webservices/login', {
    method: 'post',
    body: JSON.stringify({ username, password })
  })
  .then(res => {
    if(res.ok) {
      console.log("Succeeded.", res);
      return res.json();
    } else {
      console.log("Failed.", res);
      return res.json();
    }
  })
  .then(json => {
    if (json.token) {
      auth_status.value = true;
      return auth_status.value;
    } else {
      auth_status.value = false;
      return auth_status.value;
    }
  })
  .then(function(res){
    return new Promise((resolve, reject) => {
      dispatch({
        type: VERIFY_AUTH,
        payload: res
      });
      resolve();
    })
  })
  .catch(err => {
    console.error(err);
  });
};

login.js的示例

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
        this.props.auth(values.username, values.password).then(() => {
          if (this.props.auth_status === true) {
            message.success("Welcome!", 3);
            this.setState({
              redirect: true
            });
          } else {
            message.error("The username and password combination is incorrect", 3);
          }
        })
        .catch(err => {
          console.error(err);
        });
      }
    });
  };

Answer 1

您的操作auth未返回任何内容。异步处理程序中的return语句不会为操作本身返回。

您需要在第三次Promise解决自己的auth()操作中返回一个then：

export const auth = (username, password) => dispatch => {
    // instantly return a new promise that 
    // can be resolved/rejected in one of the handlers
    return new Promise((resolve, reject) => {
        fetch('http://localhost/webservices/login', {
            method: 'post',
            body: JSON.stringify({
                username,
                password
            })
        }).then(res => {
            if (res.ok) return res.json();

            // your probably also want to reject here 
            // to handle the failing of the action
            reject();
        }).then(json => {
            if (json.token) {
                auth_status.value = true;
                return auth_status.value;
            } else {
                auth_status.value = false;
                return auth_status.value;
            }
        }).then(res => {
            dispatch({
                type: VERIFY_AUTH,
                payload: res
            });

            // resolve the original promise here
            resolve();
        }).catch(err => console.error(err));
    });
};

TypeError：未定义不是对象（评估'_this.props.auth（values.username，values.password）.then'）

1 个答案: