反应检查多个条件以呈现组件

Question

我想在渲染组件之前检查 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 时出现错误，它告诉我 ')' 是预期的。如果我删除 !，那么它会在第一个 && 上给出一个错误，说 ',' is expected.

我做错了什么？

Answer 1

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

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

如果您的意思是 noteId 是消息中的属性，我想下面就是您要查找的内容

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

假设 sessionStorage.getItem 将 return undefined or null if not found

Answer 2

return (
  {!addedInSession && sessionStorage.getItem(noteId) && <MyComponent />}
)

在此代码中，您不在任何 JSX 中，因此您无需使用大括号转义回常规 javascript/typescript。因此，只需删除大括号即可修复语法错误：

return (
  !addedInSession && sessionStorage.getItem(noteId) && <MyComponent />
)

反应检查多个条件以呈现组件

React checking multiple conditions to render a component

session-storage

typescript

reactjs