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>
  ));

将键排序到地图中

1 个答案: