1

我想在 React 前端自动显示来自 Django Rest Api 的每条错误消息。我想用注册身份验证功能测试我的概念，在修复它之后，我想在每个组件中使用这个概念来从 django API 中获取数据或将数据提取到 django API 中。

这是我的App.js注册用户只是为了测试：

import React, { useState } from "react";

export default function Signup() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password1, setPassword1] = useState("");
  const [password2, setPassword2] = useState("");
  
  const [user, setUser] = useState("");
  function handleEmail(evt) {
    setEmail(evt.target.value);
  }
  function handleUsername(evt) {
    setUsername(evt.target.value);
  }

  function handlePassword1(evt) {
    setPassword1(evt.target.value);
  }
  function handlePassword2(evt) {
    setPassword2(evt.target.value);
  }
  function handle_signup(evt) {
    evt.preventDefault();
    fetch("http://127.0.0.1:8000/api/v1/rest-auth/registration/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username, email, password1, password2 }),
    })
      .then((res) => res.json())
      .then((json) => {
        localStorage.setItem("token", json.key);
        console.log(json);
        setUser(json.username);
      })
      .catch((err) => {
        if(err.res){
          console.log(err.res.username)
          console.log(err.res.email);
          console.log(err.res.password1);
          console.log(err.res.password2);
          
        }else if(err.res){
          console.log(err.res)
          
        }else{
          console.log('Error',err.message)
        }
        console.log(err.config);
      });
  }

  return (
    <form onSubmit={(evt) => handle_signup(evt, setUser())}>
      <label htmlFor="register-username">Username:</label>
      <input
        type="text"
        value={username}
        onChange={handleUsername}
        name="register-username"
        id="register-username"
      />
      <label htmlFor="register-email">Email:</label>
      <input
        type="text"
        value={email}
        onChange={handleEmail}
        name="register-username"
        id="register-username"
      />
      <label htmlFor="register-password1">Password1:</label>
      <input
        type="password1"
        value={password1}
        onChange={handlePassword1}
        name="register-password1"
        id="register-password1"
      />
      <label htmlFor="register-password2">password2:</label>
      <input
        type="password2"
        value={password2}
        onChange={handlePassword2}
        name="register-password2"
        id="register-password2"
      />
      <input type="submit" value="Register" />
    </form>
  );
}

在 UseEffect 中，我尝试在用户名、电子邮件、密码 1、密码 2 的相关输入框下显示每条错误消息，我尝试通过 React-hook-form 来执行此操作，但这就像从前端插入错误消息一样。但我想显示来自后端的实际错误消息。在开发工具中，当我通过在输入框中输入错误信息来尝试使用上层代码时，它只会显示POST: 400 (bad request)

如何在每个输入框下显示此类错误消息，例如用户名存在或电子邮件地址无效，或者密码必须至少为 8 个，这在 Django Rest API 的典型错误消息中是典型的？

仅供参考：如果输入框正确填写，此代码可以注册任何用户。

4

1 回答 1

0

下面的代码来自我的文章React Token-Based Authentication to Django REST API Backend。它正在使用react-bootstrap. username这是一个带有and的简单示例password，但您可以轻松扩展它。

如果有一个已知错误（关于处理错误的 axios 文档），我会检查它是否有usernameor的消息password。如果是，那么我为FormControl.Feedback. 如果您不想使用react-bootstrap，您可以在里面制作一个小的红色文本，div并且只有在设置了错误消息（非空）时才使其可见。

// frontend/src/components/SignupReducer.js

// import needed actions
import {
  CREATE_USER_ERROR,
  CREATE_USER_SUBMITTED,
  CREATE_USER_SUCCESS
} from "./SignupTypes";

// define the initial state of the signup store
const initialState = {
  usernameError: "",
  passwordError: "",
  isSubimtted: false
};

// define how action will change the state of the store
export const signupReducer = (state = initialState, action) => {
  switch (action.type) {
    case CREATE_USER_SUBMITTED:
      return {
        usernameError: "",
        passwordError: "",
        isSubimtted: true
      };
    case CREATE_USER_ERROR:
      const errorState = {
        usernameError: "",
        passwordError: "",
        isSubimtted: false
      };
      if (action.errorData.hasOwnProperty("username")) {
        errorState.usernameError = action.errorData["username"];
      }
      if (action.errorData.hasOwnProperty("password")) {
        errorState.passwordError = action.errorData["password"];
      }
      return errorState;
    case CREATE_USER_SUCCESS:
      return {
        usernameError: "",
        passwordError: "",
        isSubimtted: false
      };
    default:
      return state;
  }
}

// frontend/src/components/signup/SignupActions.js

import axios from "axios";
import { toast } from "react-toastify";
import { isEmpty } from "../../utils/Utils";
import {
  CREATE_USER_ERROR,
  CREATE_USER_SUBMITTED,
  CREATE_USER_SUCCESS
} from "./SignupTypes";

export const signupNewUser = userData => dispatch => {
  dispatch({ type: CREATE_USER_SUBMITTED }); // set submitted state
  axios
    .post("/api/v1/users/", userData)
    .then(response => {
      toast.success(
        "Account for " +
          userData.username +
          " created successfully. Please login."
      );
      dispatch({ type: CREATE_USER_SUCCESS });
    })
    .catch(error => {
      if (error.resposne) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        toast.error(JSON.stringify(error.response.data));
        dispatch({
          type: CREATE_USER_ERROR,
          errorData: error.response.data
        });
      } else if (error.message) {
        // the error message is available,
        // let's display it on error toast
        toast.error(JSON.stringify(error.message));
      } else {
        // strange error, just show it
        toast.error(JSON.stringify(error));
      }
    });
};

// frontend/src/components/signup/Signup.js file

import React, { Component } from "react";
import { withRouter } from "react-router-dom"; // new import
import { connect } from "react-redux"; // new import
import PropTypes from "prop-types"; // new import
import { Link } from "react-router-dom";
import {
  Container,
  Button,
  Row,
  Col,
  Form,
  FormControl
} from "react-bootstrap";

import { signupNewUser } from "./SignupActions"; // new import

class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
  }
  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  // update function to call the action
  onSignupClick = () => {
    const userData = {
      username: this.state.username,
      password: this.state.password
    };
    this.props.signupNewUser(userData); // <-- signup new user request
  };

  render() {
    return (
      <Container>
        <Row>
          <Col md="4">
            <h1>Sign up</h1>
            <Form>
              <Form.Group controlId="usernameId">
                <Form.Label>User name</Form.Label>
                <Form.Control
                  isInvalid={this.props.createUser.usernameError}
                  type="text"
                  name="username"
                  placeholder="Enter user name"
                  value={this.state.username}
                  onChange={this.onChange}
                />
                <FormControl.Feedback type="invalid">
                  {this.props.createUser.usernameError}
                </FormControl.Feedback>
              </Form.Group>

              <Form.Group controlId="passwordId">
                <Form.Label>Your password</Form.Label>
                <Form.Control
                  isInvalid={this.props.createUser.passwordError}
                  type="password"
                  name="password"
                  placeholder="Enter password"
                  value={this.password}
                  onChange={this.onChange}
                />
                <Form.Control.Feedback type="invalid">
                  {this.props.createUser.passwordError}
                </Form.Control.Feedback>
              </Form.Group>
            </Form>
            <Button color="primary" onClick={this.onSignupClick}>
              Sign up
            </Button>
            <p className="mt-2">
              Already have account? <Link to="/login">Login</Link>
            </p>
          </Col>
        </Row>
      </Container>
    );
  }
}

// connect action and reducer
// replace 
// export default Signup;
// with code below:

Signup.propTypes = {
  signupNewUser: PropTypes.func.isRequired,
  createUser: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  createUser: state.createUser
});

export default connect(mapStateToProps, {
  signupNewUser
})(withRouter(Signup));

注册错误

于 2020-11-12T08:03:19.050 回答