时间戳

首页 > 解决方案 > React 检查多个条件以渲染组件

reactjs - React 检查多个条件以渲染组件

问题描述

我想在渲染组件之前检查 sessionStorage 并检查状态设置的另一个变量。基本上，如果用户已经确认阅读了一条消息，我不想在同一个会话中再显示它，所以我的代码如下所示：

const addSession = (noteId: string) => {
  sessionStorage.setItem(noteId, noteId); 
}

const message = (props: ImessageProps) => {
  const [addedInSession, setAddedInSession] = useState(false); 
  return (
     <div>      
     {props.messages.map(m => {
        return (
        {!addedInSession && sessionStorage.getItem(noteId) && <MyComponent />}
         )
      })}
      </div>
  )}

但是，当我这样做时出现错误，!addedInSession它告诉我 ')' 是预期的。如果我删除！，那么它会在第一个 && 上给出一个错误，说 ',' 是预期的。

我在这里做错了什么？

标签： reactjstypescriptsession-storage

解决方案

使用过滤器和链接地图将是我从数组有条件地渲染的第一件事，其次您可以将布尔值放在地图前面，因为这些值似乎不会根据消息本身而改变。

{!addedInSession && sessionStorage.getItem(noteId) && props.messages.map(...

如果您的意思是 noteId 是消息上的一个属性，我认为以下就是您要查找的内容

{!addedInSession && props.messages.filter(m => sessionStorage.getItem(m.noteId)).map(...

假设sessionStorage.getItem如果未找到将返回 undefined 或 null

推荐阅读