嘗試通過map方法渲染兩個相鄰的tr元素時反應唯一的key prop錯誤

Question

我很沮喪 我正試圖擺脫唯一的鍵道具錯誤：

index.js:1375 Warning: Each child in a list should have a unique "key" prop. Check the render method of index.js:1375 Warning: Each child in a list should have a unique "key" prop. Check the render method of SavingsGoalList index.js:1375 Warning: Each child in a list should have a unique "key" prop. Check the render method of . in Fragment (created by SavingsGoalList) . in Fragment (created by SavingsGoalList)

SavingsGoalList是此組件，在此組件中，我嘗試使用標准表數據渲染tr，並在第二個相鄰tr中渲染，其中基於用戶輸入顯示進度條。

這些鍵實際上是唯一的，因此我認為問題是這些相鄰的標簽。 有見識嗎？ 謝謝！

<tbody>
  {props.savings.length > 0 ? (
    props.savings.map(saving => (
    <>
    <tr key={saving.id}>
      <td>{saving.item}</td>
      <td>{saving.goal}</td>
      <td>{saving.savedAmount}</td>
      <td>
        <button onClick={() => props.editSavingsGoal(saving)}>Edit</button>
        <button onClick={() => props.deleteSavingsGoal(saving.id)}>Delete</button>
      </td>
    </tr>
    <tr key={saving.savingGoalId}>
      <td colSpan={4}><progress max={saving.goal} value={saving.savedAmount}/></td>
    </tr>
    </>
  ))
) : (
  <tr>
    <td colSpan={3}>No Savings Goals</td>
  </tr>
)}
</tbody>

Answer 1

<>表示<React.Fragment>

key屬性應位於最外面的標記中。

<React.Fragment key={saving.id}>像這樣使用