如何在地图中编写 if 语句以做出反应？答案

【问题标题】：How can I write if statement inside a map in react?如何在地图中编写 if 语句以做出反应？
【发布时间】：2021-04-22 04:27:15
【问题描述】：

如果邀请未定义，我正在尝试编写 if 语句。

这是我的以下代码库：

{tabs[activeTab] === "Pending" &&
    userInvitedList.map((user, index) => (
    {user.invited.pending && ()}
    <InviteSentList
      user={user}
      index={index}
      selected={selected}
      handleSelect={handleSelect}
    />
  ))}

在这种情况下如何查看user.invited.pending？

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以这样做。

{tabs[activeTab] === "Pending" &&
    userInvitedList.map((user, index) => (
    {user.invited.pending && 
             <InviteSentList
                key={index} 
                user={user}
                index={index}
                selected={selected}
               handleSelect={handleSelect}
              />
      }
  ))}

您可以在此处参考更多详细信息[if condition inside map][1]

[1]:https://stackoverflow.com/questions/44969877/if-condition-inside-of-map-react#:~:text=I%20have%20a%20map(),)%20%3A%20(%20%2F%2F%20ByeBye!%20)%7D

【讨论】：

【解决方案2】：

如果你想在user.invited.pending 不是undefined 时显示InviteSentList，你只需像这样更新：

{user.invited.pending && (
    <InviteSentList
      user={user}
      index={index}
      selected={selected}
      handleSelect={handleSelect}
      key={user.id} // unique
    />
)}

注意：需要添加keyprops

【讨论】：

【解决方案3】：

如果你把 if 语句或类似的东西放在 map 中，你可以删除箭头函数后的 () 并用大括号 {} 进行更改。你可以这样做：

{tabs[activeTab] === "Pending" &&
 userInvitedList.map((user, index) => {
  user.invited.pending && (
    <InviteSentList
     key={index}
     user={user}
     index={index}
     selected={selected}
     handleSelect={handleSelect}
   />
  )}
)}

【讨论】：

如果使用大括号，则需要添加return

【解决方案4】：

你可以这样做。

{tabs[activeTab] === "Pending" &&
          userInvitedList.map((user, index) => {
            return user.invited.pending ? (
              <InviteSentList
                user={user}
                index={index}
                selected={selected}
                handleSelect={handleSelect}
              />
            ) : null;
          })}

【讨论】：