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

Question

I keep getting Each child in a list should have a unique "key" prop even though patient.timestamp and date is unique. obsHistory is an array and date is a string and date is only render once in a table row td. when I take out obsHistory.map or the other <tr key={date} one at a time the error still persists. I can't get the key prop error resolved not sure why.

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

You should put the key on the Fragment ( <> ).

Like this :

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