javascript - 在 useEffect 中加载数据后，仅当计数大于 0 时才显示计数(在渲染中)

Question

在 useEffect 中，notifications 从数据库中获取:

useEffect(() => {
    if (props.loading != true) {
         props.fetchNotifications(currentUserId, submissionId)
    }
}, [])

在返回语句的某处，我有以下代码对通知列表应用过滤器并检查剩余列表的长度是否大于零。然后，如果是，我使用相同的过滤语句来计算这次要显示的计数。但是，我进行了两次计算，创建了冗余代码。我想知道在 React 中是否有解决这个问题的方法。

   props.notifications &&
   <div className="col-sm-4">
       <div className="mb-3">
           <h5 className="text-primary bg-light pl-1 pt-2 pb-2">
               <i className="fa fa-bell-o"></i> &nbsp;Notifications
               <span className="badge badge-pill badge-primary small ml-2">
                   {
                       Object.keys(props.notifications)
                           .filter(function (id) {
                               return props.notifications[id].isDiscussionType == false &&
                                   props.notifications[id].isRead == false 
                           }).length > 0 &&
                       <span>{
                           Object.keys(props.notifications)
                               .filter(function (id) {
                                   return props.notifications[id].isDiscussionType == false &&
                                       props.notifications[id].isRead == false 
                               }).length} new
                       </span>
                   }
               </span>
           </h5>
           <NotificationList isDiscussionType={false} />
       </div>

Answer 1

您可以将结果存储在常量中以仅执行一次filter 操作:

const notificationsLength = props.notifications ? Object.keys(props.notifications).filter(function (id) {
    return props.notifications[id].isDiscussionType == false &&
        props.notifications[id].isRead == false
}).length : 0

return (
    <span className="badge badge-pill badge-primary small ml-2">
        {

            notificationsLength &&
            <span>{notificationsLength} new</span>
        }
    </span>
)