对存储中的数组进行排序后，Reaction组件不会重新呈现

问题描述

我正在学习Reaction和Redux，并按照Redux网站上的教程操作。我正在尝试添加一个功能，允许用户按名称、日期等对待办事项进行排序。问题是，当我对待办事项数组进行排序时，待办事项列表不会重新呈现。state.sortBy由不同的组件调度，并且正在工作。我可以清楚地看到，通过将store.getState()记录到控制台来对阵列进行排序。并且该组件当然已订阅到该存储。

数组更改。当我按"日期"排序时，它是按日期排序的。当我按"名称"排序时，它是按名称排序的。但待办事项列表组件会忽略它，并且不会重新呈现。

以下是待办事项列表容器组件的代码：

import { connect } from 'react-redux'
import TodoList from '../components/TodoList'
import { toggleTodo } from '../actions'

const sortTodos = (todos, sortBy) => {
  switch (sortBy) {
    case "date":
      return todos.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
    case "name":
      return todos.sort((a, b) => {
        if (a.name < b.name)
          return -1
        if (a.name > b.name)
          return 1
        return 0
      })
    default:
      return todos
  }
}

const mapStateToProps = (state) => ({
  todos: sortTodos(state.todos, state.sortBy)
})

const mapDispatchToProps = (dispatch) => ({
  onTodoClick: (id) => dispatch(toggleTodo(id))
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

以下是表示部分：

import React from 'react'
import Todo from './Todo'

const TodoList = ({ todos, onTodoClick }) =>
  <ul>
    {todos.map((todo) =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>

export default TodoList

我尝试了几种方法，并使其工作，但我认为这不是正确的方法。当我将.slice(0, -1)追加到sortTodos函数的Return语句后，组件重新呈现。

const sortTodos = (todos, sortBy) => {
  switch (sortBy) {
    case "date":
      return todos.sort((a, b) => Date.parse(b.date) - Date.parse(a.date)).slice(0, -1)
.
.
.

感谢您的帮助

推荐答案

sort进行就地数组排序(修改数组本身)。你需要在分拣前复印一份。例如

todos.slice(0).sort((a, b) => Date.parse(b.date) - Date.parse(a.date))

或

[...todos].sort((a, b) => Date.parse(b.date) - Date.parse(a.date))