Уникальный ключ для вложенных объектов в реакции

Question

У меня есть следующая структура для JSON структура данных

[
 [
  { city: x
    patients: x
    id: 1
  },
  { city: y
    patients: y 
    id: 2  
}
],

 [
  { city: x
    patients: x
    id: 1
  },
  { city: y
    patients: y 
    id: 2  
}
 ] 
]

Это оптимальная структура данных для моих данных, где каждый вложенный подмассив представляет день, вложенные объекты - города, а идентификатор уникален Ключ для каждого города.

Answer 1

Один из способов, которым вы могли бы go сделать это, - объединить index и city для каждого объекта и создать уникальный идентификатор.

const data = [
 [
   { id: 1, city: "New York", patients: 100 },
   { id: 2, city: "Boston", patients: 50 },
 ],
 [
   { id: 1, city: "New York", patients: 120 },
   { id: 2, city: "Boston", patients: 75 },
 ]
];

function App() {
  return (
    <div>
      {data.map((items, idx) => (
        <ul key={idx}>
          {items.map((item) => (
            <li key={`${idx}-${item.id}`}>
              [{idx}-{item.id}] {item.city}: {item.patients}
            </li>
          ))}
        </ul>
      ))}
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Или, если вы хотите просто сгладить массив и поместить все объекты в один массив, вы можете сделать нечто подобное, как я делал выше:

const data = [
 [
   { id: 1, city: "New York", patients: 100 },
   { id: 2, city: "Boston", patients: 50 },
 ],
 [
   { id: 1, city: "New York", patients: 120 },
   { id: 2, city: "Boston", patients: 75 },
 ]
];
const flattened = data.reduce(
  (accumulator, items, idx) => {
    const cities = items.map((city) => {
      return {
        uniqId: `${idx}-${city.id}`,
        ...city
      };
    })
    return [
      ...accumulator,
      ...cities
    ];
  },
  []
)
console.log(flattened)

Answer 2

Лучше всего то, что каждый объект имеет уникальный идентификатор, но если у вас его нет, вы можете использовать метод индекса карты:

objects.map((el, idx) => { 
    ....
    // you can use idx as unique index
    ....
}) 

Для вложенных объектов вы можете составить идентификатор (например, "idxmain_idxsub")