Отображение сообщения об ошибке и перенаправление с компонента

Question

Текущий статус: не решен

---

Я просто хочу показать сообщение об ошибке, чтобы узнать, существует ли уже электронная почта пользователя. Для этого у меня есть функция checkValidUser, которая возвращает ответы обратно. Теперь я получаю доступ к этим ответам как message в RegistrationForm компоненте.

Пока я могу утешить сообщение здесь, в компоненте, как показано ниже.

Итак, поток выглядит так:

Когда пользователь вводит электронное письмо , если электронная почта уже есть в базе данных, должна отображаться ошибка toastError, говорящая «Пользователь уже существует». Если адрес электронной почты отсутствует в базе данных, должен появиться значок toastSuccess с надписью «Вы успешно зарегистрированы» и в то же время перенаправлен на страницу входа.

Я не могу понять, как Совершено sh это.

Форма регистрации. js

import React, { Component } from "react";
import { registerUser, checkValidUser } from "../actions/userActions";
import { connect } from "react-redux";
import validator from "validator";
import { Link } from "react-router-dom";
import { toastError, toastInfo, toastSuccess } from "../../utils/toastify";

class RegistrationForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      email: "",
      password: "",
    };
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  };

  componentDidUpdate(prevProps) {
    console.log(" inside componentDidUpdate");
    console.log("cdu", "prevProp=>", prevProps.message, "newProp=>", this.props.message);
  }

  handleSubmit = async (event) => {
    event.preventDefault();
    const { username, email, password } = this.state;

    const registrationData = {
      username: this.state.username,
      email: this.state.email,
      password: this.state.password,
    };

    if (!username || !email || !password) {
      return toastError("Credentials should not be empty");
    }

    if (username.length < 6) {
      return toastError("Username should be greater than 6 characters.");
    }

    if (!validator.isEmail(email)) {
      return toastError("Invalid email.");
    }

    if (password.length < 6) {
      return toastError("Password must contain 6 characters.");
    }

    await this.props.dispatch(checkValidUser(email));

    const message = this.props.message;
    console.log("message in component=>", message)
  }

  render() {
    console.log("render");
    const isRegistrationInProgress = this.props.isRegistrationInProgress;
    return (
      <div>
        <div className="field">
          <p className="control has-icons-left has-icons-right">
            <input
              onChange={this.handleChange}
              name="username"
              value={this.state.username}
              className="input"
              type="text"
              placeholder="Username"
            />
            <span className="icon is-small is-left">
              <i className="fas fa-user"></i>
            </span>
          </p>
        </div>
        <div className="field">
          <p className="control has-icons-left has-icons-right">
            <input
              onChange={this.handleChange}
              name="email"
              value={this.state.email}
              className="input"
              type="email"
              placeholder="Email"
            />
            <span className="icon is-small is-left">
              <i className="fas fa-envelope"></i>
            </span>
          </p>
        </div>
        <div className="field">
          <p className="control has-icons-left">
            <input
              onChange={this.handleChange}
              name="password"
              value={this.state.password}
              className="input"
              type="password"
              placeholder="Password"
            />
            <span className="icon is-small is-left">
              <i className="fas fa-lock"></i>
            </span>
          </p>
        </div>
        <div className="field">
          <div className="control">
            {isRegistrationInProgress ? (
              <button className="button is-success is-loading">Sign Up</button>
            ) : (
              <button onClick={this.handleSubmit} className="button is-success">
                Sign up
              </button>
            )}
            <Link to="/login">
              <p className="has-text-danger">
                Already have an account? Sign In
              </p>
            </Link>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    isRegistrationInProgress: state.registration.isRegistrationInProgress,
    message: state.registration.message,
  };
};

export default connect(mapStateToProps)(RegistrationForm);

registerUser action

export const registerUser = (registrationData, redirect) => {
    console.log("registrationData", registrationData)
    return async (dispatch) => {
      dispatch({ type: "REGISTRATION_STARTS" })
      try {
        const res = await axios.post(
          `${baseUrl}/users/register`,
          registrationData
        )
        dispatch({
          type: "REGISTRATION_SUCCESS",
          data: { user: res.data.user },
        })
        toastSuccess("Successfully registered")
        redirect()
      } catch (err) {
        dispatch({
          type: "REGISTRATION_ERROR",
          data: { error: err },
        })
      }
    }
  }

checkValidUser функция контроллера

checkValidUser: async (req, res, next) => {
    console.log("inside check valid user controller")
    const { email } = req.params
    console.log(email)
    try {
      const user = await User.findOne({ email })
      if (user) {
        return res.status(200).json({ message: "User already exists" })
      } else {
        return res.json({ message: "User does not exists" })
      }
    } catch (error) {
      return next(error)
    }
  }

registerUser функция контроллера:

registerUser: async (req, res, next) => {
    try {
      var { username, email, password } = req.body
      if (password) {
        const salt = bcrypt.genSaltSync(10)
        password = bcrypt.hashSync(password, salt)
      }
      if (!username || !email || !password) {
        return res
          .status(400)
          .json({ message: "Username, email and password are must" })
      }
      if (!validator.isEmail(email)) {
        return res.status(400).json({ message: "Invaid email" })
      }
      if (password.length < 6) {
        return res
          .status(400)
          .json({ message: "Password should be of at least 6 characters" })
      }
      const user = await User.create({ username, email, password })
      if (!user) {
        return res.status(404).json({ error: "No user found " })
      }
      return res.status(200).json({ user })
    } catch (error) {
      return next(error)
    }
  }

регистрационный редуктор

const initialState = {
  isRegistrationInProgress: false,
  isRegistered: false,
  registrationError: null,
  user: {},
  isValidating: false,
  isValidated: false,
  validationError: null,
  message: "",
}

const registration = (state = initialState, action) => {
  switch (action.type) {
    case "REGISTRATION_STARTS":
      return {
        ...state,
        isRegistrationInProgress: true,
        registrationError: null,
      }

    case "REGISTRATION_SUCCESS":
      return {
        ...state,
        isRegistrationInProgress: false,
        registrationError: null,
        isRegistered: true,
        user: action.data,
      }

    case "REGISTRATION_ERROR":
      return {
        ...state,
        isRegistrationInProgress: false,
        registrationError: action.data.error,
        isRegistered: false,
        user: {},
      }
    case "CHECK_VALID_USER_STARTS":
      return {
        ...state,
        isValidating: true,
        isValidated: false,
        validationError: null,
      }
    case "CHECK_VALID_USER_SUCCESS":
      return {
        ...state,
        isValidating: false,
        isValidated: true,
        message: action.data.message,
      }
    case "CHECK_VALID_USER_ERROR":
      return {
        ...state,
        validationError: action.data.error,
      }

    default:
      return state
  }
}

export default registration

checkValidUser действие

export const checkValidUser = (email) => {
  return async (dispatch) => {
    dispatch({ type: "CHECK_VALID_USER_STARTS" })
    try {
      const res = await axios.get(`${baseUrl}/users/checkValidUser/${email}`)
      console.log("message in action=>", res.data)
      dispatch({
        type: "CHECK_VALID_USER_SUCCESS",
        data: { message: res.data.message },
      })
    } catch (err) {
      dispatch({
        type: "CHECK_VALID_USER_ERROR",
        data: { error: "Something went wrong" },
      })
    }
  }
}

Answer 1

В вашем mapStateToProps, поскольку вашему компоненту требуется текущее состояние isValidated при отправке действия электронной почты:

const mapStateToProps = (state) => {
          return {
            isRegistrationInProgress: state.registration.isRegistrationInProgress,
            message: state.registration.message,
           isValidated: state.checkValidUser.isValidated
          };
        };

Вы должны проверить свое ответное сообщение после отправки в действии checkValidUser. Поскольку ответ будет 200, если вызов успешен, но это не означает, что подтверждено, может быть электронная почта существует или нет.

export const checkValidUser = (email) => {
  return async (dispatch) => {
    dispatch({ type: "CHECK_VALID_USER_STARTS" })
    try {
      const res = await axios.get(`${baseUrl}/users/checkValidUser/${email}`)
      console.log("message in action=>", res.data)

      if(res.data.messsage="User does not exists"){//you can just return 
          dispatch({                                 // success or failed
        type: "CHECK_VALID_USER_SUCCESS",
        data: { message: res.data.message },
      })
       toastSuccess("Success");
      redirect();
      }else{
       toastError("Email exists")
     }

    } catch (err) {
      dispatch({
        type: "CHECK_VALID_USER_ERROR",
        data: { error: "Something went wrong" },
      })
    }
  }
}