如何按指定属性对对象数组排序？在mapStateToProps或render_tasks中实现任务按time升序

位置选择说明 #

• 若当前排序规则仅为该组件独有，其他引用tasks数据的组件不需要排序：推荐写在render_tasks函数中，保持Redux数据源的纯净性
• 若所有引用tasks数据的组件都需要统一按time升序展示：推荐写在mapStateToProps函数中，统一做数据预处理，避免多组件重复编写排序逻辑

具体实现代码 #

方案1：排序逻辑写在render_tasks中 #

修改render_tasks内的遍历逻辑，先拷贝数组再排序后遍历：

render_tasks = () => {
  return (
    <table cellSpacing='0'>
      <tbody>
        {/* 先拷贝原数组再排序，避免修改原始props数据 */}
        {[...this.props.tasks].sort((a, b) => {
          // 当time为数字时间戳时使用该写法
          return a.time - b.time
          // 当time为时间格式字符串（如'2024-05-01 12:00'）时替换为下面的写法
          // return new Date(a.time) - new Date(b.time)
        }).map(task => {
            return (
              <tr key={task.id}>
                <td>{task.text}</td>
                <td>{task.time}</td>
                <td 
                  className='remove-btn' 
                  onClick={() => this.props.remove_task(task.id)}>
                    X
                </td>
              </tr>
            )
          })
        }
      </tbody>
    </table>
  )
}

方案2：排序逻辑写在mapStateToProps中 #

修改mapStateToProps的返回逻辑，统一返回排序后的数组：

function mapStateToProps(state) {
  // 先拷贝原数组再排序，避免修改Redux原始state
  const sortedTasks = [...state].sort((a, b) => {
    // time为数字时间戳写法
    return a.time - b.time
    // time为时间字符串写法
    // return new Date(a.time) - new Date(b.time)
  })
  return {
      tasks: sortedTasks
  }
}

注意：JavaScript原生的Array.sort()是原地排序方法，会直接修改调用它的原数组，因此必须先通过展开运算符[...arr]或者arr.slice()拷贝一份原数组再执行排序，避免修改Redux中的不可变状态，引发不可预期的渲染bug。

内容的提问来源于stack exchange，提问作者Qatr El-Nada