ReactJS：具有条件表达式的嵌套.map将一个数组中的值与第二个数组进行匹配

Question

我有两个数组（语法不正确，但是您得到了图片...）
this.state.race
{
“ raceName”：“总统”， “ raceID”：100
}
AND
this.state.candidates
{
“ canName”：“约翰”， “ canID”：1 “ raceID”：100
}，
{
“ canName”：“ David”， “ canID”：2 “ raceID”：100
}，
{
“ canName”：“ Sally”， “ canID”：3， “ raceID”：101
}

我想显示所有种族，并且只显示具有匹配种族ID的候选人

所以会是这样：

种族100：
1.约翰
2.大卫

第101场：
{...没有候选人}

我的代码是这样的：

render() {
  return (
    {this.state.racelist.map(myrace => (
       {myrace.title}
       <divider />
       {this.state.candidatelist.map(mycand => (
          {/********************************************************
          how can i put a conditional statment here that checks to see if,
          mycand.raceID === myrace.raceID  ???? and if those match, render
          mycand info
          ********************************************************/}
       ))}
    ))}
  )
}

Answer 1

您可以在制作内部地图之前使用filter进行此操作。例如：

render() {
  return (
    {this.state.racelist.map(myrace => (
      {myrace.title}
      <divider />
      {this.state.candidatelist
        .filter(cand => cand.raceId === myrace.raceId)
        .map(mycand => (
          <YourComponentHere candidate={mycand}/>
        ))
      }
    ))}     
  )
}

这可以通过每次仅包含匹配的种族ID候选对象给您一个内部数组来工作。这样，您只需要映射即可。