代码之家 › 专栏 › 技术社区 › gl03

react+immutable.js:将映射合并到映射列表中以更新状态

immutable.js react-redux ecmascript-6 reactjs javascript

gl03 · 技术社区 · 6 年前

我正在我的新React项目中尝试不可变的.js,但是我在将一个映射添加到我所在州的现有映射列表时遇到了问题。

我以前会写(使用数组和对象):

this.setState({
  objectsArray: [...this.state.objectsArray, newObject];
})

但是我正在努力寻找与不可变.js的适当等价物。我试过这么做,但没有成功:

state.get('mapsList').merge(newMap);

我在网上找到了很多合并列表和合并地图的例子,但是我有一个地图列表,不可变列表上的官方文档并不是很详尽。

有关react/redux状态操作的资源和最佳实践链接也很感谢,谢谢!

2 回复 | 直到 6 年前

T.J. Crowder 6 年前

您的“旧”代码创建了一个新数组,其中包含已存在的相同对象以及一个新对象。

据我所知,不变的 List#push 做同样的事情:

push()

返回新的 List 提供的 values 附加,从这里开始 表 的 size .
push(...values: Array<T>): List<T>

所以:

this.setState(({mapsList}) => {
    return {mapsList: mapsList.push(newMap)};
});

旁注:我使用的是回调版本 setState 因为你不能像以前的代码那样做。如果要基于现有状态设置新状态,则必须使用回调; details .

UXDart 6 年前

您需要用更新列表

state = state.updateIn(['mapsList'], function(list) { return list.push(newMap); })

它将用新的newmap更新mapslist列表

推荐文章

Piotr Chmielowiec · 组件从一个调度发出两个api调用

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Storm28 · 错误:函数作为子函数无效。如果从渲染返回组件而不是<Component/>,则可能会发生这种情况

2 年前

Stephen Aranda · 如何使用React在前端UI上显示API响应消息?

2 年前

khalil hajri · 无效的钩子调用。钩子只能在函数组件的主体内部调用(react native)

2 年前

ShaySS · 如果我不需要将数据存储在redux存储中,我是否必须使用redux saga从API获取数据?

2 年前

arya.s · Toast错误消息在React/Redux中多次显示。如何避免?

2 年前

jack · 注销后清除redux商店

3 年前

Emm · 添加CombineReducer后无法读取未定义(读取“map”)的属性

3 年前

MariaT · 如何使用bootstrap 4在折叠菜单后面获取徽章?

6 年前