Reactjs 如何在我的React钩子中的迭代数据中添加以下“if-else if-else”条件

如何在我的React HOOK和split name中的迭代数据中添加以下

if-else if-else

条件，并将名称添加到各个div中？当我试图在迭代部分中添加正常的if条件时，抛出错误。

下面是要实现的条件

if(nomineeteam == "QA" ) {
// add name for QA here 
}
else if (nomineeteam == "DEV" ){
// add name for DEV here 
}
else if (nomineeteam == "Support" ){
// add name for Support here 
}

迄今已完成的工作如下：

const teamWise = [
  {
    "nomineename": "Name1",
    "nomineeteam": "QA",
  },
  {
    "nomineename": "Name2",
    "nomineeteam": "DEV",
  },
  {
    "nomineename": "Name3",
    "nomineeteam": "Support",
  },
  {
    "nomineename": "Name4",
    "nomineeteam": "QA",
  }
]



const [teamwiseNomination, setTeamwiseNomination] = useState([]);

useEffect(() =>{
  setTeamwiseNomination(teamWise);
})
    <div className="space_1 tile">
            <h3>Teamwise Nominations</h3>
           <div className="grid-container">
                {
                     teamwiseNomination.map(data =>(
                        <div key={data.id} className="team-1">
                            <h5 key={data.nomineeteam}>{data.nomineeteam}</h5>
                            <span key={data.nomineename} className="data-1">{data.nomineename}</span>
                        </div>
                     ))
                }
            </div>
        </div>

const teamWise=[
{
“被提名人姓名”：“姓名1”，
“提名团队”：“QA”，
},
{
“被提名人姓名”：“姓名2”，
“提名团队”：“开发人员”，
},
{
“被提名人姓名”：“姓名3”，
“提名团队”：“支持”，
},
{
“被提名人姓名”：“姓名4”，
“提名团队”：“QA”，
}
]
const[TeamWise提名，SettamWise提名]=useState（[]）；
useffect（（）=>{
SettamWise提名（团队）；
})
团队提名
{
TeamWiseNamement.map（数据=>(
{data.team}
{data.name}
))
}

---

映射回调只是一个普通函数，您可以在大多数情况下应用您喜欢的任何javascript。为映射回调提供一个函数体（相对于隐式返回），添加if-else-if逻辑，并返回所需的JSX

{
  teamwiseNomination.map(data => {
    if (data.nomineeteam === "QA" ) {
      // add name for QA here 
    } else if (data.nomineeteam === "DEV" ) {
      // add name for DEV here 
    } else if (data.nomineeteam === "Support" ) {
      // add name for Support here 
    }

    return (
      <div key={data.id} className="team-1">
        <h5>{data.nomineeteam}</h5>
        <span className="data-1">{data.nomineename}</span>
      </div>
    );
  })
}

然后使用

Object.entries（teams）

获取要映射的

[Namedeteam，NamedeName[]]

实体数组。将

代名人团队

渲染到

h5

中，然后将

代名人姓名[]

映射到

span

s中

<div className="grid-container">
  {Object.entries(teams).map(([team, names]) => (
    <div key={team} className="team-1">
      <h5>{team}</h5>
      {names.map((name) => (
        <span key={name} className="data-1">
          {name}
        </span>
      ))}
    </div>
  ))}
</div>

{Object.entries（teams.map）（[team，name]）=>(
{团队}
{names.map（（name）=>(
{name}
))}
))}

---

使用

作为键将项目分组到映射，然后使用
数组.from（）
将映射转换为数组

在JSX中，映射外部
组
数组，然后用名称映射对象数组，并渲染它们

要避免在每次渲染时重新计算
组
，请使用
usemo
来记忆计算。您不需要将其添加到状态


const{usemo}=React；
const createGroups=teamWise=>
Array.from(
团队减少（（acc，o）=>{
如果（！acc.has（o.namedeteam））acc.set（o.namedeteam，[]）；
acc.get（o.TEAM）、push（o）；
返回acc；
}，新地图（）），
（[Namedeteam，values]）=>（{Namedeteam，values}）
)
const Demo=（{teamWise}）=>{
constgroups=usemo（（）=>createGroups（teamWise），[teamWise]）；
返回(
团队提名
{groups.map（组=>(
{组.团队}
{
group.values.map（数据=>(
{data.name}
))
}
)) }
);
};
const teamWise=[{
“被提名人姓名”：“姓名1”，
“提名团队”：“QA”，
},
{
“被提名人姓名”：“姓名2”，
“提名团队”：“开发人员”，
},
{
“被提名人姓名”：“姓名3”，
“提名团队”：“支持”，
},
{
“被提名人姓名”：“姓名4”，
“提名团队”：“QA”，
}
]
ReactDOM.render(
,
根
);
.team-1{
背景：橙色；
}
.数据-1+.数据-1{
左边距：1米；
}

这真的很有帮助，我不知道
return（）
code会做到这一点…@soccerway是的。如果您需要根据条件返回不同的JSX，您还可以为每个
if
分支单独返回。我已经尝试过，但它是作为单独的div添加的。也就是说，我有两条QA记录和一条DEV.@soccerway记录。基于上述评论和您的共享图像，您似乎更希望分组您的团队。我用一个例子更新了我的答案。这与Ori的答案相似，但这是一种常见的模式。如果这不是您想要做的，那么我要求您更新您的问题，以包含您想要做的最新代码。
<div className="grid-container">
  {Object.entries(teams).map(([team, names]) => (
    <div key={team} className="team-1">
      <h5>{team}</h5>
      {names.map((name) => (
        <span key={name} className="data-1">
          {name}
        </span>
      ))}
    </div>
  ))}
</div>