过滤对象分为两组的匹配对象键值

问题描述：

var transformers = [ 
    { 
    name: 'Optimus Prime', 
    form: 'Freightliner Truck', 
    team: 'Autobot' 
    }, 
    { 
    name: 'Megatron', 
    form: 'Gun', 
    team: 'Decepticon' 
    }, 
    { 
    name: 'Bumblebee', 
    form: 'VW Beetle', 
    team: 'Autobot' 
    }, 
    { 
    name: 'Soundwave', 
    form: 'Walkman', 
    team: 'Decepticon' 
    } 
];

我怎样才能使取决于team值

<div> 
<h1>Autobot Team</h1> 
... //Here goes the corresponding matches 
</div> 
<div> 
<h1>Decepticon Team</h1> 
... //Here goes the corresponding matches 
</div>

我想这两个组没有运气

renderTeam(){ 
    transformers.map(team =>{ 
    if(team.team === "Autobot"){ 
    return(
    <div>{team.name}</div> 
    ) 
    } 
    if(team.team === "Decepticon"){ 
    return(
    <div>{team.name}</div> 
    ) 
    } 
    }) 
} 
<div> 
<h1>Autobot Team</h1> 
    {this.renderTeam()} 
</div> 
<div> 
<h1>Autobot Team</h1> 
    {this.renderTeam()} 
</div>

答

你的功能renderTeam可能取一个字符串参数，允许您过滤和映射数组：

renderTeam(team) { 
    return transformers 
    .filter(transformer => transformer.team === team) 
    .map(transformer => (<div key={transformer.name}>{transformer.name}</div>); 
} 

render() { 
    return (
    <div className="transformer-teams"> 
     <div> 
     <h1>Autobot Team</h1> 
     {renderTeam('Autobot')} 
     </div> 
     <div> 
     <h1>Decepticon Team</h1> 
     {renderTeam('Decepticon')} 
     </div> 
    </div> 
); 
}

答

为了达到这个目的，将一个参数传递给renderTeam将包含任何一个团队名称的方法，它将返回ui元素。不要忘记从renderTeam方法中返回结果。

还将唯一键分配给循环内的每个元素。

像这样：

<div> 
    <h1>Autobot Team</h1> 
    {this.renderTeam('Autobot')} 
</div> 
<div> 
    <h1>Autobot Team</h1> 
    {this.renderTeam('Decepticon')} 
</div> 

renderTeam(team){ 
    let items = []; 
    transformers.forEach((item,i) => { 
     if(item.team === team) 
      items.push(<div key={i}>{item.name}</div>);   
    }) 
    return items; 
}

但是，使用这种方法，你需要再次运行同一个循环，这样可以避免你可以把它写这样也：

renderTeam(){ 
    let team1 = [], team2 = []; 
    transformers.forEach((item,i) => { 
     if(item.team === 'Autobot') 
      team1.push(<div key={i}>{item.name}</div>); 
     else if(item.team === 'Decepticon') 
      team2.push(<div key={i}>{item.name}</div>); 
    }) 
    return (
     <div> 
      <div> 
       <h1>Autobot Team</h1> 
       {team1} 
      </div> 
      <div> 
       <h1>Autobot Team</h1> 
       {team2} 
      </div> 
     </div> 
    ) 

} 

render(){ 
    return(
     <div> 
      {this.renderTeam()} 
     </div> 
    ) 
}

过滤对象分为两组的匹配对象键值

相关推荐