反应中嵌套对象的唯一键

Question

I have following structure for JSON data structure

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

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

Is this optimal data structure for my data, where each nested sub array represents a day, the nested objects are cities and the id are unique key for each city.

Answer 1

The best thing is that each object has a unique id, but if you don't have one, you can use the index of map method:

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

For nested objects you can compose the idx (for example "idxmain_idxsub")

Answer 2

One way you could go about this is by combining both the index and city for each object and create a unique identifier.

 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>

Or, if you want to just flatten your array and have all object within a single array, you could do something similar like I did above:

 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)