reactjs - Reactjs/Redux 在 redux 操作完成时创建通知

Question

我有一个自定义通知组件。这个想法是，当像 login_fail 这样的 redux 操作完成时，通知会在几秒钟后弹出并隐藏，显示消息。但我无法使其正常工作。通知中的消息弹出0.1s然后什么都不渲染。整个通知保持在那里并且不会消失。我猜我的 Notification.js 有问题。

0.1s后，

在我的 App.js 中，

import React from 'react'
import './App.css';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";

import Notification from './utilities/Notification/NotificationTest';
import NavBar from './components/NavBar/NavBar';
import Home from './pages/Home/Home';
import Error from './pages/Error/Error';

function App() {
  return (
    <Router>
      <Notification />
      <NavBar />
        <Route render={({ location }) => (
          <TransitionGroup>
            <CSSTransition key={location.key} timeout={450} classNames="fade">
              <Switch location={location}>
                <Route exact path="/" render={props => <Home {...props} />} />
                <Route component={Error} />
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        )} />
      </NextPageToTop>
    </Router>
  );
}

export default App;

在我的 UserReducer.jsx 中，

import UserActionTypes from './User.types';

const INITITAL_STATE = {
    userState: [],
    isLogin: false,
    hasError: false,
    message: '',
}

const userReducer = (state = INITITAL_STATE, action) => {
    switch (action.type) {
        case UserActionTypes.LOGIN_SUCCESS:
             return {
                isLogin: true,
                userState: action.payload, //userData
                hasError: false,
                message: action.payload.status, // message from api (e.g. 'Login 
                Successfully')
            };

        case UserActionTypes.LOGIN_FAIL:
            return {
                isLogin: false,
                userState: [],
                hasError: true,
                message: action.payload.status, (e.g. 'Login Fail')
            };

        default:
            return state;
    }
}

export default userReducer;

在我的 User.actions.jsx

import axios from "axios";
import UserActionTypes from './User.types';

export const LoginAction = (loginState, history) => {
    return async (dispatch) => {
        try {
            const res = await axios.post("api/login", loginState);
            const { data } = res;
            dispatch({ type: UserActionTypes.LOGIN_SUCCESS, payload: data });
            history.push("/");
        } catch (error) {
            if (error.response) {
                dispatch({
                    type: UserActionTypes.LOGIN_FAIL,
                    payload: error.response.data.message,
                });
            }
        }
    };
};

在我的 Notification.js 中，

import React, { useState, useEffect } from 'react';
import './Notification.css';
import { connect } from 'react-redux';

const Notification = (props, duration = 5000) => {
    const { message, error } = props;
    const [showNotification, setShowNotification] = useState(false)

    useEffect(() => {
        setShowNotification(true);

        setTimeout(() => setShowNotification(false), duration)
    }, [duration])

    return (
        <div className="notification-container">
            {showNotification ? `${message}` : null}
        </div>
    );
}

const mapStateToProps = (state) => ({
    error: state.user.hasError,
    message: state.user.message,
});

export default connect(
    mapStateToProps,
)(Notification)

任何解决方案？

标签： reactjsredux

Answer 1

在您的通知组件中试试这个：

return showNotification ?
    <div className="notification-container">
        {message}
    </div>
    :null
);

此外，您的持续时间应该在 props 内，如下所示：

const Notification = ({message, duration}) => {
    const [showNotification, setShowNotification] = React.useState(false)

    React.useEffect(() => {
        setShowNotification(true);
        setTimeout(() => setShowNotification(false), duration)
    }, [duration])

    return showNotification ?(
        <div className="notification-container">
            {message}
        </div>
    ):null;
}

ReactDOM.render(
  <Notification message={"notification"} duration={5000} />
  ,
  document.getElementById("react")
);

.notification-container {
  background-color: red;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>