Question

我正在研究一个项目，我有一个要求，那就是显示通知。

所以我正在使用react钩子useEffect来做到这一点。

下面是我要尝试的方法。

const showNotification = useSelector(
        state => state.showNotificationInfo
    );

useEffect(() => {
        if (showNotification.message !== null && showNotification.description !== null ) {
            const args = {
                message: showNotification.message,
                description: showNotification.description,
                duration: 0
            };
            notification.open(args);
        }
    }, [showNotification]);

在上面的代码中，我正在获取redux的showNotificationInfo值并将其存储在名为showNotification的变量中。默认情况下，它将为null。

所以无论何时showNotification更改，除了null之外，我都要显示通知。

但是我的问题是，即使状态为null，它也会显示具有null值的通知。我不确定我在哪里犯错。谁能建议我做一个更好的方法，或者可能的话纠正我。

编辑1：

redux状态

const initialState = {
    ...
    ...
    ...
    showNotificationInfo: {
        message: null,
        description: null,
        status: null
    }
};

export default function(state = initialState, action) {
    switch (action.type) {
        case SET_NOTIFICATION_INFO:
            return {
                ...state,
                showNotificationInfo: {
                    ...state.showNotificationInfo,
                    message: action.payload.title,
                    description: action.payload.message,
                    status: action.payload.status
                }
            };
    }
}

编辑2：

组件代码：

import React, { Fragment, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { notification } from "antd";

const ShowNotificationsComponent = () => {
    const showNotification = useSelector(
        state => state.showNotificationInfo
    );

    useEffect(() => {
        if (showNotification.message !== null && showNotification.description !== null) {
            const args = {
                message: showNotification.message,
                description: showNotification.description,
                duration: 0
            };
            notification.open(args);
        }
    }, [showNotification]);

    return (
        <Fragment></Fragment>
    );
};

export default ShowNotificationsComponent;

编辑3：

动作创建者代码

所以我在这里要做的是每当我按下一个按钮时，都会调用该动作创建者并将redux状态（即showNotificationInfo）设置为null，然后从后端获取新的通知值并调度新的商店的通知值。

export const moveToMyList = () => dispatch => {
    const setMoveToListInfoToNull = {
        message: null,
        description: null,
        status: null
    };

    dispatch({
        type: SET_SHOW_NOTIFICATION_INFO,
        payload: setMoveToListInfoToNull 
    });

    return axios({
        method: "post",
        url: API_URL 
    })
        .then(res => {
            const moveToMyListInfo= {};

            moveToMyListInfo["title"] = res.data.message;
            moveToMyListInfo["message"] = res.data.description;
            moveToMyListInfo["status"] = res.data.status;

            dispatch({
                type: SET_SHOW_NOTIFICATION_INFO,
                payload: moveToMyListInfo
            });
        })
        .catch(e => {
            console.log(e.response);
        });
};

我正在使用的此通知组件是子组件。即使父组件重新呈现，该通知组件（子组件）也将得到显示，而与redux状态无关。

Answer 1

showNotification是一个对象，因此您不能仅检查它是否为null（x === null）。您可以进行showNotification.message === null

React钩子：显示通知的钩子方法

1 个答案: