Question

我很困惑。我正试图摆脱唯一的键道具错误：

index.js:1375 Warning: Each child in a list should have a unique "key" prop. Check the render method of 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}>这样使用

尝试通过map方法渲染两个相邻的tr元素时反应唯一的key prop错误

1 个答案: