javascript - 在 React 中将键排序到映射中

Question

当我尝试从react中的mi map 函数内的状态订购 key 时遇到问题..

原始回复是:

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 进行排序..我尝试仅使用键设置一个新状态并在我的 map 内制作 map ，但不起作用，我不想要仅为此设置七个状态..有什么建议吗？谢谢!

{
  _.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>
  ));