javascript - 每个子列表键都是唯一的，但我仍然在控制台中收到错误消息。 react 器

Question

我不断收到 Each child in a list should have a unique "key" prop即使 Patient.timestamp 和 date 是唯一的。 obsHistory 是一个数组，日期是一个字符串，日期仅在表行 td 中呈现一次。当我取出 obsHistory.map或另一个 <tr key={date}一次一个错误仍然存​​在。我无法解决关键 Prop 错误，不知道为什么。

renderObsHistory() {
  const patientDetails = this.state.observations;

  let groupedByDate = patientDetails.reduce((groupArray, patient) => {
    groupArray[patient.date] = groupArray[patient.date] || [];
    groupArray[patient.date].push(patient);
    return groupArray;
  }, {});

  return Object.entries(groupedByDate).map(([date, obsHistory]) => (
    <>
      <tr key={date}>
        <td>
          <strong>{date}</strong>
        </td>
      </tr>

      {obsHistory.map(patient => (
        <tr key={patient.timestamp}>
          <td>{patient.timestamp}</td>
        </tr>
      ))}
    </>
  ));
}

Answer 1

您应该将 key 放在 Fragment ( <> ) 上。

像这样 :

<React.Fragment key={data}>
  <tr>
   /* ... */
  </tr>
  /* ... */
</React.Fragment>