Reactjs 反应组件不';对存储区中的数组进行排序后重新加载
我正在学习React和Redux,并遵循Redux网站上的教程。我正在尝试添加一个功能,允许用户按名称、日期等对todo进行排序。问题是在对todo数组进行排序时,todo列表不会重新排序。Reactjs 反应组件不';对存储区中的数组进行排序后重新加载,reactjs,react-redux,Reactjs,React Redux,我正在学习React和Redux,并遵循Redux网站上的教程。我正在尝试添加一个功能,允许用户按名称、日期等对todo进行排序。问题是在对todo数组进行排序时,todo列表不会重新排序。状态。sortBy由不同的组件调度,并且它正在工作。我可以清楚地看到,数组是通过将store.getState()记录到控制台来排序的。当然,组件已订阅到存储 数组会发生变化。当我按“日期”排序时,它是按日期排序的。当我按“名字”排序时,它是按名字排序的。但是todo列表组件忽略它,并且不会重新渲染 以下是t
状态。sortBy
由不同的组件调度,并且它正在工作。我可以清楚地看到,数组是通过将store.getState()
记录到控制台来排序的。当然,组件已订阅到存储
数组会发生变化。当我按“日期”排序时,它是按日期排序的。当我按“名字”排序时,它是按名字排序的。但是todo列表组件忽略它,并且不会重新渲染
以下是todo列表容器组件的代码:
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
感谢您的帮助
排序
执行就地数组排序(修改数组本身)。你需要在分类前复印一份。比如说
todos.slice(0).sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
或
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))