gpt4 book ai didi

reactjs - 对存储中的数组进行排序后,React 组件不会重新渲染

转载 作者:行者123 更新时间:2023-12-02 18:09:57 24 4
gpt4 key购买 nike

我正在学习 React 和 Redux,并按照 Redux 网站上的教程进行操作。我正在尝试添加一个功能,允许用户按名称、日期等对待办事项进行排序。问题是当我对待办事项数组进行排序时,待办事项列表不会重新呈现自身。 state.sortBy 由不同的组件分派(dispatch)并且它正在工作。我可以清楚地看到该数组是通过将 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))

关于reactjs - 对存储中的数组进行排序后,React 组件不会重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50288154/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com