中繼QueryRendererfragmentContainer傳遞的道具不同於服務器響應，因為id沖突

Question

我基本上有這個奇怪的問題：

1. 從制成graphql請求QueryRenderer
2. 服務器返回的響應包含數據（從開發工具的“網絡”標簽中檢查）
3. props填充在QueryRenderer render({ error, props })功能
4. props通過createFragmentContainer傳遞到子組件中，該子組件呈現值
5. 一個字段的呈現值與響應不同

我不確定中繼從自己的存儲中查找數據時中繼在做什么，但是我懷疑這是因為類型中缺少id聲明，下面是代碼示例：

App.js

<QueryRenderer
  environment={env}
  query={graphql`
    query ScoreboardContainerQuery($ID: ID!) {
      scoreboard(id: $ID) {
        ...Scoreboard_scoreboard
      }
    }
  `}
  variables={{ID: gameID}}

  render={({ error, props }) => {
    return <Scoreboard scoreboard={props ? props.scoreboard : undefined} />
  }}
/>

Scoreboard.js

const Scoreboard = ({ scoreboard }) => (
  <main>
    {scoreboard.matches.map(match => <Match key={match.id} match={match} />)}
  </main>
)

export default createFragmentContainer(Scoreboard, {
  scoreboard: graphql`
  fragment Scoreboard_scoreboard on FootballScoreboard {
    matches {
      ...Match_match
    }
  }
  `,
})

Match.js

const Match = ({ match }) => (
  <div>
    <div>
      {match.homeTeam.displayName}-
      {match.homeTeam.score}
    </div>
    <div>
      {match.awayTeam.displayName}-
      {match.awayTeam.score}
    </div>
  </div>
)

export default createFragmentContainer(Match, {
  match: graphql`
    fragment Match_match on Match {
      date
      homeTeam { // this is a Team type
        id
        displayName
        score
      }
      awayTeam { // this is a Team type
        id
        displayName
        score
      }
    }
  `,
})

來自服務器的matches樣本響應：

matches = [
  {
    "date": "2017-09-03T06:00:00Z",
    "homeTeam": {
      "id": "330",
      "displayName": "STG",
      "score": "20"
    },
    "awayTeam": {
      "id": "332",
      "displayName": "CBY",
      "score": "0"
    }
  },
  {
    "date": "2017-08-27T06:00:00Z",
    "homeTeam": {
      "id": "329",
      "displayName": "PEN",
      "score": "14"
    },
    "awayTeam": {
      "id": "330",
      "displayName": "STG",
      "score": "0"
    }
  },
  {
    "date": "2017-08-12T05:00:00Z",
    "homeTeam": {
      "id": "330",
      "displayName": "STG",
      "score": "42"
    },
    "awayTeam": {
      "id": "337",
      "displayName": "GCT",
      "score": "0"
    }
  },
]

呈現的值：

(
  <main>
    <div>
      <div>STG-42</div>
      <div>CBY-6</div>
    </div>
    <div>
      <div>PEN-0</div>
      <div>STG-42</div>
    </div>
    <div>
      <div>STG-42</div>
      <div>GCT-18</div>
    </div>
  </main>
)

因此，所有STG值STG覆蓋為42，而不應如此。

是因為Match類型中沒有id （響應是一個數組）引起此問題嗎？ 這就是為什么中繼正在尋找具有相同ID的Team的原因？

Answer 1

發生這種情況是因為Relay用每次更新的最新值更新ID為330的Team類型（即SGT）； 列表的最后一個是42。

你可以刪除score從場Team （它似乎有點奇怪，一個團隊沒有一個得分，這是她有一個分數的比賽中），並創建了2場Match類型： awayTeamScore和homeTeamScore 。