Reactjs 反应检查多个条件以渲染组件

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

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>
  )}

const addSession=（noteId:string）=>{
setItem（noteId，noteId）；
}
const message=（props:ImessageProps）=>{
const[addedInSession，setAddedInSession]=useState（false）；
返回(
{props.messages.map（m=>{
返回(
{！addedInSession&&sessionStorage.getItem（noteId）&&}
)
})}
)}

但是，我在执行

时出错！addedInSession

it's telling me'）是预期的。如果我移除了！，然后，它将在第一个字符上给出一个错误&表示预期为“”

---

我在这里做错了什么？

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

{！addedInSession&&sessionStorage.getItem（noteId）&&props.messages.map（。。。

如果您的意思是noteId是消息上的一个属性，那么我想下面就是您要查找的内容

{！addedInSession&&props.messages.filter（m=>sessionStorage.getItem（m.noteId））.map（。。。

---

假设

sessionStorage.getItem

将返回undefined或null（如果找不到）

使用过滤器和链映射将是我从数组有条件渲染的第一件事，第二件事是可以将bool放在映射前面，因为这些值似乎不会根据消息本身而改变

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

{！addedInSession&&sessionStorage.getItem（noteId）&&props.messages.map（。。。

如果您的意思是noteId是消息上的一个属性，那么我想下面就是您要查找的内容

{！addedInSession&&props.messages.filter（m=>sessionStorage.getItem（m.noteId））.map（。。。

假设

sessionStorage.getItem

将返回undefined，如果找不到则返回null

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

{！addedInSession&&sessionStorage.getItem（noteId）&&}
)

在这段代码中，您不在任何JSX中，因此不需要使用花括号返回到常规javascript/typescript中。因此，只需删除花括号，您就可以修复语法错误：

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

返回(
！addedInSession&&sessionStorage.getItem（noteId）&&
)

返回(
{！addedInSession&&sessionStorage.getItem（noteId）&&}
)

在这段代码中，您不在任何JSX中，因此不需要使用花括号返回到常规javascript/typescript中。因此，只需删除花括号，您就可以修复语法错误：

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

返回(
！addedInSession&&sessionStorage.getItem（noteId）&&
)

删除返回的括号谢谢。我这样做了，但是{}中的整个代码现在被禁用。@WilliamWang删除返回的括号谢谢。我这样做了，但是{}中的整个代码现在被禁用。@WilliamWang