通知被阅读后通知徽章不会消失？答案

【问题标题】：Notifications badge doesn't go away after notifications get read?通知被阅读后通知徽章不会消失？
【发布时间】：2020-12-20 23:24:34
【问题描述】：

这是我在导航栏中的通知图标标记，这不会在阅读通知后删除带有未读通知计数的徽章：

const notificationsIcon =
     notifications && notifications.length && notifications.filter(n => !n.read).length ?
         <Badge badgeContent={notifications.filter(n => !n.read).length}>
             <NotificationsIcon /> //Material-UI Icon
         </Badge> : <NotificationsIcon />

但这有效：

let notificationsIcon;
        if (notifications && notifications.length > 0) {
            notifications.filter(n => n.read === false).length > 0
                ? (notificationsIcon = (
                    <Badge
                        badgeContent={
                            notifications.filter(n => n.read === false).length
                        }
                    >
                        <NotificationsIcon />
                    </Badge>
                ))
                : (notificationsIcon = <NotificationsIcon />);
        } else {
            notificationsIcon = <NotificationsIcon />;
        }

我真的不明白为什么第二个标记有效而第一个无效，

const mapStateToProps = state => ({
  notifications: state.user.notifications
})

notificationsIcon 变量将被包装在带有 Material-UI 元素 IconButton 的 render 方法中，单击该元素时会向 redux 存储发送操作以将通知 read 属性更改为 true，这将更新组件中的通知。

【问题讨论】：

标签： javascript reactjs redux jsx

【解决方案1】：

我试过这个只是为了测试你的第一个逻辑，这个有效：

let notifications = [{read: true}, {read: true}]
const notificationsIcon =
     notifications && notifications.length && notifications.filter(n => !n.read).length ?
         "yes" : "no";
         console.log(notificationsIcon);

无法尝试使用实际代码，您能否提供 stackblitz 或 plunker。也试试这个：

const notificationsIcon =
 notifications && notifications.length && notifications.filter(n => !n.read).length ?
     (<Badge badgeContent={notifications.filter(n => !n.read).length}>
         <NotificationsIcon /> //Material-UI Icon
     </Badge>) : (<NotificationsIcon />);

【讨论】：