reactjs - Redux 不更新状态
问题描述
即使更新了 props,Redux 也不会更新组件。我有一个数据,其中lists
每个列表都可以cards
在它们内部和lists
内部也有一个(如文件夹内的文件夹)。cards
并且lists
基本上是一个对象数组。这是一个示例数据-
"data": [
{
"name": "new list",
"id": 31,
"created_at": "2018-11-07 17:48:10+05:30",
"lists": [],
"cards": [
{
"name": "new call",
"id": 8,
"display_order": 0,
"due_at": null,
"user_list_id": 31,
"description": null,
"created_at": "2018-11-08T16:34:14+05:30",
"labels": null
},
{
"name": "testing",
"id": 9,
"display_order": 2,
"due_at": null,
"user_list_id": 31,
"description": null,
"created_at": "2018-11-08T20:07:12+05:30",
"labels": null
},
{
"name": "new card",
"id": 7,
"display_order": 3,
"due_at": null,
"user_list_id": 31,
"description": null,
"created_at": "2018-11-08T16:34:09+05:30",
"labels": null
}
]
},
{
"name": "rename",
"id": 29,
"created_at": "2018-11-04 20:03:54+05:30",
"lists": [],
"cards": [
{
"name": "testing",
"id": 1,
"display_order": 0,
"due_at": null,
"user_list_id": 29,
"description": null,
"created_at": "2018-11-08T16:23:40+05:30",
"labels": null
},
{
"name": "testing again",
"id": 2,
"display_order": 1,
"due_at": null,
"user_list_id": 29,
"description": null,
"created_at": "2018-11-08T16:23:45+05:30",
"labels": null
}
]
}
]
现在,在我删除一张卡片后,我会从这样的列表中删除这张卡片。
const lists = this.props.lists;
const foundAt = lists.findIndex(e => parseFloat(e.id) === parseFloat(listId));
let cards = lists[foundAt]['cards'];
const cardFoundAt = cards.findIndex(e => parseFloat(e.id) === parseFloat(cardId));
cards.splice(cardFoundAt, 1);
lists[foundAt]['cards'] = cards;
this.props.rearrangeList(lists);
在我的行动中,我有这个-
export const rearrangeLists = (lists) => {
return {
type: REARRANGED_LISTS,
payload: lists
};
};
在我的减速机中,我有这个-
...
case REARRANGED_LISTS:
return {
...state,
lists: action.payload
};
...
我不知道我在哪里做错了。呈现列表的组件不显示更新的版本,但是在我render
执行component
a 时console.log(this.props.lists)
,我看到它显示的是更新版本,但在页面上,它没有更新它。我真的很无知。请帮忙。预先感谢您的帮助。
解决方案
您的减速器应该处理从您的数组中删除该项目。
case REMOVE_ITEM:
return data.filter(item => item.id !== payload.item_id)
你应该有一个类似的减速器。您的日期从 redux 状态传递给您的组件。
推荐阅读
- java - 使用构造函数初始化java时钟
- mapreduce - 计算猪的流派
- c# - 如何为不同的子类实现多个接口实例?
- c# - 我们如何通过配置文件设置解决依赖关系
- android - 将文件作为附件添加到 gmail
- angular - 项目与带有 jest 框架的 angular 6 集成,npm 测试抛出错误
- javascript - 有没有办法在枚举之间进行继承?
- puppet - "::mysql::server" 和 "mysql::server" 之间的区别
- java - 我希望这张照片可以通过触摸旋转
- sql-server - 我在哪里可以获得 Visual Studio Tools for Applications 2008