api 在 Redux 加载两次后收到的道具导致 React Hooks

Question

我正在从 reducer 获取状态，但它正在加载两次，例如当我得到状态时，烤面包机出现了两次。所以，问题是由于此烤面包机正在加载两次，我两次获得登录 api 登录失败状态。我尝试调试问题但不能下面是代码（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;

Answer 1

问题是您正在使用 2 <ToastContainer />。删除第二个，应该只显示 1 个吐司。

我猜这是一个打字错误？

您想写以下内容吗？

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

api 在 Redux 加载两次后收到的道具导致 React Hooks

Props received after api hit in Redux loading two times results in React Hooks

reactjs

react-toastify