Отображать данные ошибки проверки формы JSON в React после запроса формы

Question

Форма, которую я написал в React, отправляет данные почтового отправления и экспресс-проверки для следующего:

1. Если какое-либо поле оставить пустым.
2. Если пароли> = 8.
3. Если пароли совпадают.
4. I пользователь еще не существует.

Если какой-либо из этих критериев не соответствует, он отправляет обратно сообщение об ошибке, используя res.json.

У меня вопрос, как мне правильно отобразить его в React with Axios.

P.S. Я уже пытался использовать методы жизненного цикла

Реагировать:

import React, { Component } from 'react'
import axios from 'axios'

export default class Register extends Component {
  constructor(){
    super();
    this.state = {
      data: {}
    }
  }
  componentDidMount(){
    axios.post('/register')
         .then(data => console.log(data))
         .catch(err => console.log(err));
  }
  render() {
    return (
      <div>
        <form method = "POST">
          <div>Enter Your name: </div>
          <input id = "name" type = "name" name = "name" />
          <div>Enter Your Email</div>
          <input id = "email" type = "email" name = "email" />
          <div>Enter UserID</div>
          <input id = "userID" type = "userID" name = "userID" />
          <div>Enter your PassWord: </div>
          <input id = "password" type = "password" name = "password" />
          <div>Enter your PassWord Again: </div>
          <input id = "password2" type = "password2" name = "password2" />
          <div>
            <button type = "submit">Submit</button>
          </div>
        </form>
      </div>
    )
  }
}

Экспресс:

const express                 = require('express');
const route                   = express.Router();
const bcrypt                  = require('bcryptjs');
const User                    = require('../models/User');

//Register Route
route.post('/' , (req , res) => {
    //Destructuring data from the request
    const { name , password , password2 , email , userID } = req.body;
    let err = [];

    //If any field was left empty
    if(!name || !password || !password2 || !email || !userID){
        JSON.stringify(err.push("Please Fill In All The Fields."));
        res.json({
            err: err[0]
        });
    }

    //Checking If Passwords Match
    if(password !== password2){
        JSON.stringify(err.push("Passwords Dont Match."));
        res.json({
            err: err[0]
        })
    }

    //Checking Password Length
    if(password.length <= 8){
        JSON.stringify(err.push("Password Must Be Atleast 8 Characters Long."))
        res.json({
            err: err[0]
        })
    }
    //If User Already Exists
    User.findOne({userID: userID})
            .then(user => {
                if(user){
                    JSON.stringify(err.push("Choose A Different Username"))
                    res.json({
                        err: err[0]
                    })
                } else {
                    //If User Does Not Exist
                    const NewUser = new User({
                        name,
                        email,
                        userID,
                        password
                    })
                    //Hashing The Password
                    bcrypt.genSalt(10 , (err , salt) =>{
                        bcrypt.hash(NewUser.password , salt , (err , hash) => {

                            if(err) throw err;
                            NewUser.password = hash;
                            NewUser.save()
                                   .then(() => {
                                       //res.redirect('/login');
                                       res.json({ msg: "New User Saved" });
                                   })
                                   .catch(err => res.json({err: err}));
                        });
                    })
                }
            })
        .catch(err => res.json({err: err}) );
})

module.exports = route;

Answer 1

Вы можете просто передать его в состояние, используя .catch(err => this.setState({ err }))

Затем вы можете напрямую обратиться к нему внутри render метода, чтобы отобразить сообщение об ошибке, если ошибка присутствует следующим образом:

render() {
  return (
    <div>
      //your component
      {state.err && <span>{err.message}</span>}
    </div>
  );
}