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

Question

我正在从reducer获取状态，但它加载了两次，例如，当我获取Toast显示两次的状态时。所以，问题是我得到了两次登录api登录失败的状态，因为这个Toast加载了两次。我试着调试这个问题，但做不到以下是代码(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>