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语法和一些伪代码标记来简化它并简化它

我认为你的地图功能如下：

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

然后你有一些更容易映射的东西，如：

select

Answer 2

我在内部地图循环技术方面取得了成功。只需取一个变量使其初始化为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>
     )
   })
 }

内部地图功能不起作用 - ReactJS

2 个答案: