内部映射函数不起作用 - ReactJS

Question

我想在列表中显示 8 项运动，并在用户已经参与时显示其参与状态。当用户未参与时显示一个按钮。但我没有通过内部映射功能成功

{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

我将尝试

一下，并使用一些 ES6 语法和一些伪代码标记来简化它

我认为您的地图函数如下所示：

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>
    )
}

我认为你通过循环遍历所有内容而不是从一开始就以有意义的方式构建数据来使这变得非常复杂。

你可以考虑这样的事情：

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
}

然后你有一些更容易映射的东西，看起来像：

[{ 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

我在内部映射循环技术方面取得了成功。只需取一个变量，使其最初为假，并在条件为真时使其成为真。就这样。谢谢。

{   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>
     )
   })
 }