javascript - 如何管理 react 中的已读和未读通知？

Question

我正在使用 React js，我想开发与帐户相关事件相关的通知组件。我必须在通知列表中显示所有与帐户相关的事件，并将它们排序为已读 和未读 通知。

所以我的问题是如何在 react/next js 中管理已读和未读通知？

我需要让它成为状态或 session 存储吗？

考虑这是我的通知列表:

const notificationArray = [
  { id: 1, msg: 'one' },
  { id: 2, msg: 'two' },
  { id: 3, msg: 'three' },
  { id: 4, msg: 'four' },
  { id: 5, msg: 'five' },
];

在下面的列表中，我收到了一条新通知:

const notificationArray = [
  { id: 1, msg: 'one' },
  { id: 2, msg: 'two' },
  { id: 3, msg: 'three' },
  { id: 4, msg: 'four' },
  { id: 5, msg: 'five' },
  { id: 6, msg: 'six' }
];

Answer 1

如果您的通知数据来自数据库，您需要添加一个新属性来指示是否已读取天气信息然后你可以只使用 State 不需要 session 每当用户阅读你在客户端更新列表的通知并且异步告诉后端通知已被读取

数据看起来像这样:

[{id:1,msg:'msg',read:false}.....]

客户端代码如下所示:

const [notifs,setNotifs] = useState()
function setRead(id){
  for (var i in notifs) {
     if (notifs[i].id === id) {
        notifs[i].read = true;
        break;
     }
   }
  setNotifs(notifs)
callYourBackEnd(id,readStatus) // here just call your api service or something and send to it id of the notif and the read status 'true of false' which is probably true

}
//maping the notifs list here and pass the id to setRead
notifs?.map(notif=> <NotifComonent onClick={e=>setRead(notif.id)} />