インナーマップ機能が動作していません - ReactJS

Question

8スポーツをリストに表示し、ユーザーが既に参加したときに参加した状態を表示します。ユーザー私はこれを刺しを取り、いくつかのES6の構文といくつかの擬似コードのマークアップとそれを簡素化するつもりだ

{this.state.sports.map(function(sport, index){   
     return(
      <div> 
       <li key={index} style={{ listStyle:'none' }}> 
        <h4>{ sport.name }</h4> 
       </li> 
       {this.state.join_sports.map(function(sport1, index){       
        return (
         <div> 
         {sport._id === sport1.s_id ? 
          <span>Participated</span> : 
          <button className="btn btn-info btn-xs">Participate</button> 
         } 
         </div> 
        ) 
       }.bind(this))} 
     </div> 
    ); 
}.bind(this))} 

Answer 1

内部マップ機能とそれを成功しなかったparticipated.Butないとき、ボタンを表示する

私はあなたのマップ機能は、次のようになりますと思う：

mapSportsToUser() { 
    const sports = ['a', 'b', ... 'z']//pseudo data 
    const user = ['b', 'c'] //we should only show sport c and c 
    return (
     <container> //not needed in 15.5+ I think 
     { sports.map((sport, sportIndex) => (//this will generate one title for each sport 
      <title>{sport.name}</title> 

      //your second map iterates over the list... 
      //(probably not the easiest way to do this but it should work) 
      { user.map((sportUser, userIndex) => { 
       if (sportUser == sport) { 
        return <participate /> 
       } else { 
        return null //don't render anything 
       } 
      } } 
     )) } 
     </container> 
    ) 
} 

私はあなたがすべてをループではなく、最初から理にかなった方法でデータを構築することで、これは本当に複雑になっていると思います。私は、内側マップルーピング技術に成功しました

[{ sport: 'a', participation: false}, { sport: 'b', participation: true} ...] 

.... 
    sportsLookup.map(lookup => { //much simpler 
     return <container> {lookup.sport.name} {lookup.participation ? 'Yes' : 'No'}</container> 
    }) 

Answer 2

：

structureData(listOfSports, listUserHasParticipatedIn) { 
    let sportsLookup = {} //create a map 
    for(let i = 0; i < listOfSports.length; i++) {//or whatever iterator you like 
     const sport = listOfSports[i] 
     sportsLookup[sport.id] = { 
      sport: sport, 
      participation: false, 
     } 
    } 

    for(let i = 0; i < listUserHasParticipatedIn.length; i++) { 
     const user_sport = listUserHasParticipatedIn[i] 
     //you might want to do a null check here 
     sportsLookup[user_sport.id].participation = true; 
    } 

    return sportsLookup 
} 

は次に、あなたがどのように見えるどのマッピングする簡単な何かを持っている：

あなたはこのような何かを考えるかもしれません。変数を最初にfalseにして、条件が真であれば真にします。それで全部です。ありがとうございました。

{ this.state.sports.map((sport,index)=>{ 
     let is_participate = false; 
     this.state.join_sports.map((j_spt,index)=>{ 
      if(sport._id === j_spt.s_id[0]){ 
       is_participate = true; 
      } 
     }); 
    return(
     <li>{is_participate? <span>{sport.name}-- participated</span>:<span>{sport.name}-- participate </span>}</li> 
    ) 
    }) 
}