React. Redux. Не получается осуществитесь валидацию пользователей в форме входа на сайт

Есть 2 идентичные страницы: одна страница входа(авторизации), а другая - регистрации. В форме регистрации я осуществила через redux добавление данных пользователей. А вот сравнить данные вводимые на странице входа с данными сохраненными при регистрации не получается. помогите пожалуйста понять в чем моя ошибка.

Страница входа:

import React from 'react'
import { Link, useNavigate } from 'react-router-dom'
import '../Pages/Auth.css'
import { useDispatch } from 'react-redux'
import { useState } from 'react'

function Auth() {

    const dispatch = useDispatch();

    const[entrLogin, setEntrLogin] = useState('');
    const[entrPassword, setEntrPassword] = useState('');

    const [entrLogError, setEntrLogError] = useState('');
    const [entrPassError, setEntrPassError] = useState('');

    let entrLogCheck = false;
    let entrPassCheck = false;

    const navigate = useNavigate();

    const entrLogHandler = (event) => {
        setEntrLogin(event.target.value)
      };
    
    const entrPassHandler = (event) => {
        setEntrPassword(event.target.value)
      };
    
    const handleUserCheck = (event) => {
    event.preventDefault();
        if(entrLogin === ''){
            setEntrLogError('Поле не должно быть пустым');
            entrLogCheck = false;
          }
          else if(entrLogin.length < 4){
            setEntrLogError('Логин должен содержать не менее 4-х символов');
            entrLogCheck = false;
          }
          else{
            setEntrLogError('');
            entrLogCheck = true;
          };
        
          if(entrPassword === ''){
            setEntrPassError('Поле не должно быть пустым');
            entrPassCheck = false;
          }
          else if(entrPassword.length < 4){
            setEntrPassError('Пароль должен содержать не менее 4-х символов');
            entrPassCheck = false;
          }
          else{
            setEntrPassError('');
            entrPassCheck = true;
          };
          console.log(entrLogCheck, entrPassCheck);
          console.log(entrLogin, entrPassword);
        };

    let user = user.find(user => user.login === entrLogin.value);
        if (user){
            if(user.password === entrLogin){
                navigate('/');
            }else{
                alert('Такого пользователя не существует. Перейдите во вкладку "Регистрация');
            };
    }

    return (
        <div className = "auth">
            <img className = "auth__background" src = '/Mask Group.png' alt = ''></img>
            <form className = "auth__form">
                <Link to={'/Registration'} className = "auth__link">Зарегистрироваться</Link>
                <h1 className = "auth__header">Вход</h1>
                <input type = "text" className = "auth__inpt"  placeholder="Логин" onChange = {event => entrLogHandler(event)} value={entrLogin}></input>
                <label className = "auth__test">{entrLogError}</label>
                <input type = "password" className = "auth__inpt"  placeholder="Пароль" onChange = {event => entrPassHandler(event)} value = {entrPassword}></input>
                <label className = "auth__test">{entrPassError}</label>
                <div className="container">
                    <div className="round">
                        <input type="checkbox" id="checkbox"></input>
                        <label htmlFor="checkbox"></label>
                    </div>
                    <div className="auth__checkbox-text">Я согласен получать обновления на почту</div>
                </div>
                <button type = 'submit' onClick = {handleUserCheck} className="auth__entr-btn">Войти</button>
            </form>
        </div>
    );
  }
  
export default Auth;

Страница регистрации:

import React from 'react'
import './Registration.css'
import { Link, useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addAuth } from '../store/reducers/auth'

function Registration() {

  const dispatch = useDispatch();
  const[login, setLogin] = useState('');
  const[password, setPassword] = useState('');

  const [logError, setLogError] = useState('');
  const [passError, setPassError] = useState('');

  let logCheck = false;
  let passCheck = false;

  const navigate = useNavigate();
  //const back = navigate(-1);

  const logHandler = (event) => {
    setLogin(event.target.value)
  };

  const passHandler = (event) => {
    setPassword(event.target.value)
  };

  const handleUserReg = (event) => {
    event.preventDefault();
      if(login === ''){
        setLogError('Поле не должно быть пустым');
        logCheck = false;
      }
      else if(login.length < 4){
        setLogError('Логин должен содержать не менее 4-х символов');
        logCheck = false;
      }
      else{
        setLogError('');
        logCheck = true;
      };
    
      if(password === ''){
        setPassError('Поле не должно быть пустым');
        passCheck = false;
      }
      else if(password.length < 4){
        setPassError('Пароль должен содержать не менее 4-х символов');
        passCheck = false;
      }
      else{
        setPassError('');
        passCheck = true;
      };
      console.log(logCheck, passCheck);
      console.log(login, password);

      if(logCheck === true && passCheck === true){
        dispatch(addAuth({
          login, password
        }));
        navigate('/');
      };
    };
    

    return (
   <div className = "reg">
    <img className = "reg__background" src = '/Mask Group.png' alt = ''></img>
    <form className = "reg__form" action="#">
        <Link to={'/Auth'} className = "reg__link">Авторизоваться</Link>
        <h1 className = "reg__header">Регистрация</h1>
        <input type = "text" className = "reg__inpt" placeholder="Логин" onChange = {event => logHandler(event)} value={login}></input>
        <label className = "reg__test">{logError}</label>
        <input type = "password" className = "reg__inpt" placeholder="Пароль" onChange = {event => passHandler(event)} value = {password}></input>
        <label className = "reg__test">{passError}</label>
        <div className="container">
            <div className="round">
                <input type="checkbox" id="checkbox"></input>
                <label htmlFor="checkbox"></label>
            </div>
            <div className="reg__checkbox-text">Я согласен получать обновления на почту</div>
        </div>
        <button className="reg__entr-btn" type = 'submit' onClick = {handleUserReg}>Зарегистрироваться</button>
    </form>
  </div>
    );
  }
  
export default Registration;

Страница редьюсера для регистрации:

mport { createSlice } from "@reduxjs/toolkit"

const userSlice = createSlice({
  name: 'user',
  initialState:{
    user:[],
    login:'',
    password:'',
    Authorization:false,
  },

  reducers:{
    addAuth(state,action){
      state.user.push(action.payload);
    },
    entranceAuth(state){
      state.Authorization=true;
    },
    exitAuth(state){
      state.Authorization =false;
    },
  }
});

export const{ addAuth, entranceAuth, exitAuth } = userSlice.actions;
export default userSlice.reducer;

Ответы (0 шт):