仅当在 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>

)

Answer 2

您可以将其提取出来并创建一个变量，例如：

const filteredNotifications = Object.keys(props.notifications)

                                    .filter(id => props.notifications[id].isDiscussionType == false 

                                               && props.notifications[id].isRead == false })

然后你可以做类似的事情

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

 {

  filteredNotifications.length > 0 &&

  (<span>{filteredNotifications.length} new </span>)

 }

</span>