Question

我正在开发React JS应用程序，这是一个匹配得分预测应用程序。

使用以下代码，该应用当前可显示即将进行的匹配的列表，用户可以单击该列表并输入预测。

if(!this.props.loading && !this.props.error){
upcomingmatches = this.props.upcmgMatches.map(upcomingMatch => {
    return <UpcomingMatch
        key={upcomingMatch.id}
        teamA={upcomingMatch.teamA}
        teamB={upcomingMatch.teamB}
        matchKickoff={upcomingMatch.matchKickoff}
        clicked={() => this.addInitInputMatchResultHandler(upcomingMatch.id, upcomingMatch.teamA, upcomingMatch.teamB, upcomingMatch.matchKickoff)}
    />
});
}

我想对其进行修改，以便如果用户已经对匹配进行了预测，那么它将显示该组件，但带有其他信息，例如他们当前的预测。

我的组件可以访问两个对象数组，这些对象数组是从Firebase表接收并变成数组的。

upcmgMatches显示用户可以预测的所有当前即将到来的匹配项。

userPredictions显示用户尚未进行预测的所有匹配项。因此，如果upcmgMatches中的所有匹配项都为它们做出了预测，或者可能只是这些匹配项的一个子集，或者如果它们没有做出任何预测，那么我可能会包含一个空数组。

这些数组如下所示。

因此，id中的upcmgMatches应该与matchID中的userPredictions匹配

upcmgMatches = [{
    "matchKickoff": "2018-09-22T10:45",
    "teamA":"Roosters",
    "teamB":"Dragons",
    "id":"-LN-pNFv-rFJQkunM1Tv"
  },  
  {
    "matchKickoff": "2018-09-22T19:00",
    "teamA": "Storm",
    "teamB": "Sharks",
    "id": "-LMrXWzcEjN_u_jlULuJ"
  }]

userPredictions = [{
    "matchID": "-LMrXWzcEjN_u_jlULuJ",
    "teamAName": "Storm",
    "teamAScore": "22",
    "teamBName": "Sharks",
    "teamBScore": "12",
    "userId": "J2QO4OHT5vc7aAkT9vcdREo1IuW2",
    "id": "-LMvzSoaMAhBUhgWMOpM"
  }]

所以我认为我修改后的逻辑是..

对于upcmgMatches中的每个匹配项，请检查id字段上userPredictions中的matchID是否存在，如果确实存在，则返回UpcomingMatch组件以及来自的其他信息userPredictions即TeamAScore和teamBScore。如果不是这样，则只需从upcmgMatches返回信息，该信息应该是相同的，但是没有预测的分数。

Answer 1

您可以使用Object.keys（）获取外部对象键

const getFirstKey = o => Object.keys(o)[0]

const getMatchIds = matches => matches.map(getFirstKey)

然后，您可以根据它检查userPredictions列表。

const isUserMatch = matchKey =>
  getMatchIds(userPredictions)
    .includes(matchKey)

const upcomingUserMatches = upcomingMatches
  .map(getFirstKey)
  .filter(isUserMatch)

检查数组元素是否存在于另一个数组中

1 个答案: