小编Dar*_*on4的帖子

对存储中的数组进行排序后,React Component不会重新呈现

我正在学习React和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 …
Run Code Online (Sandbox Code Playgroud)

reactjs react-redux

1
推荐指数
1
解决办法
1483
查看次数

标签 统计

react-redux ×1

reactjs ×1