Сортировать ключи в карту в ответ

Question

У меня проблемы, когда я пытаюсь упорядочить ключи из состояния внутри функции mi map в реагировать.

исходный ответ:

monday : {1200: {…}, 1500: {…}, 1800: {…}, 2000: {…}, 2200: {…}, 0000: {…}, 0100: {…}, 0500: {…}, 0600: {…}, 0900: {…}}

и мне нужно сделать заказ так:

monday : { 0000:{..} ,0100:{..}, 0500:{..} ,0600:{..} ,0900:{..}, 1200:{..}, 1500:{..}, 1800:{..}, 2000:{..}, 2200:{..} }

все эти данные у меня уже есть в this.state.grid, и у этого объекта есть весь день недели. так что в моем рендере я использую ключ как индекс, но я не могу отсортировать карту .. я пытаюсь установить новое состояние только с ключами и создать карту внутри моей карты, но не работает, и я не хочу иметь семь штатов только для этого .. есть предложения? Спасибо!

{
  _.map(this.state.grid.monday, (element , hs) => {

  return ( 
      <tr className='grid-info' key={hs}> 
         <td colSpan='2'><p className="hs">{hs} </p></td> 
         <td colSpan='3'><p className="title">{element.program}</p></td>
      </tr>
    )
  })
}  

Answer 1

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

 Object.entries(this.state.grid.monday)
   .sort(([a], [b]) => a - b)
   .map(([hs, element]) =>  ( 
     <tr className='grid-info' key={hs}> 
         <td colSpan='2'><p className="hs">{hs} </p></td> 
         <td colSpan='3'><p className="title">{element.program}</p></td>
     </tr>
  ));