Question

我正在使用登录系统。当用户输入电子邮件和密码并单击“提交”时，我正在调用我的端点以使用mapDispatchToProps验证凭据，如果登录正确，我将使用令牌和auth：true更新应用程序状态，否则我需要发布错误。如何读取响应错误消息（来自api后端json响应）？

我希望读取分派的usersLogin（）函数的响应。

//...

use Symfony\Component\Serializer\SerializerInterface;

//...

class whatever 
{
    private $serializer;

    public function __constructor(SerializerInterface $serialzer)
    {
        $this->serializer = $serializer;
    }

    public function exampleFunction()
    {
        //...
        $data = $this->serializer->serialize($demands, "json");
        //...
    }
}

当然，这是我在redux中间件中的登录功能：


import React, { Component } from "react";
import { connect } from "react-redux";
import { usersLogin } from "../../actions/index";
import { Link } from "react-router-dom";

import i18n from "../../i18n";

function mapDispatchToProps(dispatch) {
  return {
    usersLogin: login => dispatch(usersLogin(login))
  };
}

class ConnectedLoginForm extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
    this.setState({ [event.target.id]: event.target.value });
  }
  handleSubmit(event) {
    event.preventDefault();
    const { email } = this.state;
    const { password } = this.state;
    this.props.usersLogin({ email, password });
    this.setState({ email: email, password: password });
  }
  render() {
    const { email } = this.state;
    const { password } = this.state;

    console.log("this.props");
    console.log(this.props.usersLogin);
    return (
      <form onSubmit={this.handleSubmit} className="login-form">
        <div className="form-group">
          <h2>{  i18n.t("Login") }</h2>
          <input
            type="text"
            className="input-text"
            id="email"
            value={email}
            onChange={this.handleChange}
            placeholder="Email"
            autoCorrect="off" autoCapitalize="none"
          />
          <input
            type="text"
            className="input-text"
            id="password"
            value={password}
            onChange={this.handleChange}
            placeholder="Password"
            autoCorrect="off" autoCapitalize="none"
          />          
          <button type="submit" className="button btn-primary">
            Login
          </button>
          <div className="other-action">
          <Link to="/logout">Registrati</Link> 
          <Link to="/logout">Password dimenticata</Link> 
          </div>
        </div>
      </form>
    );
  }
}
const Loginform = connect(null, mapDispatchToProps)(ConnectedLoginForm);
export default Loginform;

Answer 1

谢谢大家，我改变了方式。我安装了react-toastify，并将错误通知放在中间件中ajax调用的catch块中。

values

该解决方案似乎适合我现在的需求。

如何从mapDispatchToProps中的Ajax调用获取响应数据

1 个答案: