如何使用 .map 在 React 中排序/升序？

Question

我有一个对象数组，我需要根据 {i.u_dashboard} 项进行升序排序。 我将如何进行排序？

const Results = () => {
    return (
      <>
        {
          results.map(i => (
              <ul>
                    <li
                      className={`colorDot && ${selectDashboard.name === i.u_dashboard && 'decreaseHeight'}`}
                      style={{ backgroundColor: determineDotColor(i.u_calls_in_queue) }}
                    ></li>
                    <li key={i.sys_id}><img src={logoMapper[i.u_dashboard]} alt="company logo"/><h1>{i.u_dashboard}</h1></li>
                    <li>Available Agents: <span className="callData">{i.u_agents_available}</span></li>
                    <li>Calls in Queue: <span className="callData">{i.u_calls_in_queue}</span></li>
                    <li>Longest Active Call: <span className="callData">{i.u_longest_active_call}</span></li>
                    <li>Longest Queued Call: <span className="callData">{i.u_longest_queued_call}</span></li>
                    <li>Queue Time Daily: <span className="callData">{i.u_queue_time_daily}</span></li>
                    <li>Queue Time MTD: <span className="callData">{i.u_queue_time_mtd}</span></li>
                    <li>Queue Time Last Month: <span className="callData">{i.u_queue_time_last_month}</span></li>
                    <li>Calls Taken MTD: <span className="callData">{i.u_calls_taken_mtd}</span></li>
                    <li>Calls Taken Last Month: <span className="callData">{i.u_calls_taken_last_month}</span></li>
                    {i.u_billable_tickets_closed_mtd && <li>BT Closed MTD: <span className="callData">{i.u_billable_tickets_closed_mtd}</span></li>}
                    {i.u_billable_tickets_closed_last_month && <li>BT Closed Last Month: <span className="callData">{i.u_billable_tickets_closed_last_month}</span></li>}
              </ul>
          ))
        }
      </>
    )
  }

Answer 1

只需在地图前添加一个排序功能，如果它们是可比较的。

{
          results.sort((a,b) =>{ 
              if (a.u_dashboard < b.u_dashboard) {
                   return -1
              }
              if (a.u_dashboard > b.u_dashboard) {
                   return 1
              }
              return 0
              }).map(i => (
              <ul>
                    <li
                      className={`colorDot && ${selectDashboard.name === i.u_dashboard && 'decreaseHeight'}`}
                      style={{ backgroundColor: determineDotColor(i.u_calls_in_queue) }}
                    ></li>
                    <li key={i.sys_id}><img src={logoMapper[i.u_dashboard]} alt="company logo"/><h1>{i.u_dashboard}</h1></li>
                    <li>Available Agents: <span className="callData">{i.u_agents_available}</span></li>
                    <li>Calls in Queue: <span className="callData">{i.u_calls_in_queue}</span></li>
                    <li>Longest Active Call: <span className="callData">{i.u_longest_active_call}</span></li>
                    <li>Longest Queued Call: <span className="callData">{i.u_longest_queued_call}</span></li>
                    <li>Queue Time Daily: <span className="callData">{i.u_queue_time_daily}</span></li>
                    <li>Queue Time MTD: <span className="callData">{i.u_queue_time_mtd}</span></li>
                    <li>Queue Time Last Month: <span className="callData">{i.u_queue_time_last_month}</span></li>
                    <li>Calls Taken MTD: <span className="callData">{i.u_calls_taken_mtd}</span></li>
                    <li>Calls Taken Last Month: <span className="callData">{i.u_calls_taken_last_month}</span></li>
                    {i.u_billable_tickets_closed_mtd && <li>BT Closed MTD: <span className="callData">{i.u_billable_tickets_closed_mtd}</span></li>}
                    {i.u_billable_tickets_closed_last_month && <li>BT Closed Last Month: <span className="callData">{i.u_billable_tickets_closed_last_month}</span></li>}
              </ul>
          ))
        }

不确定它是否能正常工作，但这可能是一种解决方案。