Реквизит, полученный после попадания api в Redux, дважды загружается, приводит к React Hooks - PullRequest
Новая
       50

Реквизит, полученный после попадания api в Redux, дважды загружается, приводит к React Hooks

0 голосов
/ 13 июля 2020

Я получаю состояние от reducer, но он загружается два раза, например, когда я получаю состояние Toaster появляется два раза. Итак, проблема в том, что я дважды получаю состояние ошибки входа api Login Failed из-за того, что этот тостер загружается два раза. Я пытаюсь отладить проблему, но не могу. Ниже приведен код (HTML удален) 

import React, {useState,useEffect} from 'react';
import { loginAction } from './action';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import {SmallLogo} from "../../assets/index";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function Login(props){
    const [inputs, setInputs] = useState({
        email: '',
        password: ''
    });

    const dispatch = useDispatch();

    const handleChange = (e) => {
        const {name, value} = e.target;
        setInputs(inputs => ({...inputs, [name]:value }));
    }

    const {email, password} = inputs;

    const submitLoginForm = (e) => {
        e.preventDefault();
        let loginData = {
            email,
            password
        }
        //Login action is called
        dispatch(loginAction(loginData));
    }
    //getting state from reducer
    const userState = useSelector(state => state,shallowEqual);
   //notification
    const notify = (message, id) => {
        console.log(message,id,"How many times it is called");
        toast.dismiss();
        toast.warning(message,{
            position: "top-right",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            toastId:id
        })
    }

    return (
        
        <div className="container h-100">
            
            <ToastContainer
                position="top-right"
                autoClose={5000}
                hideProgressBar={false}
                newestOnTop={false}
                closeOnClick
                rtl={false}
                pauseOnFocusLoss
                draggable
                pauseOnHover
            />
            <ToastContainer />
            {userState.userReducer.error!=="" && notify(userState.userReducer.error,123)}
            {submitLoginForm}
        </div>
    );
}
export default Login;

1 Ответ

1 голос
/ 13 июля 2020

Проблема в том, что вы используете 2 <ToastContainer />. Удалите второй, и будет отображаться только 1 тост.

Думаю, это опечатка?

Вы хотели написать следующее? 

        <ToastContainer
            position="top-right"
            autoClose={5000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        >
        </ToastContainer>
...