Javascript 反应+;immutable.js:将映射合并到映射列表中以更新状态

Javascript 反应+;immutable.js:将映射合并到映射列表中以更新状态,javascript,reactjs,ecmascript-6,react-redux,immutable.js,Javascript,Reactjs,Ecmascript 6,React Redux,Immutable.js,我正在我的新React项目中尝试immutable.js,但在我所在州的现有地图列表中添加地图时遇到了问题 我以前会写(使用数组和对象): 但我正在努力找到与immutable.js的适当等价物。我尝试过类似的方法,但没有成功: state.get('mapsList').merge(newMap) 我在网上找到了大量的合并列表和合并地图的例子,但是我有一个地图列表,而不可变列表上的官方文档并不是很详细 同时也感谢您提供有关React/Redux状态操作的资源和最佳实践的链接,谢谢 您的“旧”代

我正在我的新React项目中尝试immutable.js,但在我所在州的现有地图列表中添加地图时遇到了问题

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

但我正在努力找到与immutable.js的适当等价物。我尝试过类似的方法,但没有成功:

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

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

同时也感谢您提供有关React/Redux状态操作的资源和最佳实践的链接,谢谢

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

就我所见,Immutable的作用是一样的:

push()

返回一个新的
列表
,其中附加了提供的
,从该
列表的
大小开始

push(...values: Array<T>): List<T>

旁注:我使用的是回调版本的
setState
,因为不允许您执行旧代码所执行的操作。如果要基于现有状态设置新状态,则必须使用回调函数

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

就我所见,Immutable的作用是一样的:

push()

返回一个新的
列表
,其中附加了提供的
,从该
列表的
大小开始

push(...values: Array<T>): List<T>


旁注:我使用的是回调版本的
setState
,因为不允许您执行旧代码所执行的操作。如果要基于现有状态设置新状态,则必须使用回调函数

您需要使用更新列表

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


这将使用新的地图更新地图列表

您需要使用

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


这将使用新的newMap更新mapsList列表

我假设
this.state
是标准的React state对象,它只是一个无聊的旧对象。您是否假设OP正在执行其他操作,而是使用某个不可变类?请重新编辑:
state=state.updateIn(…)
您不能在react中执行此操作。你不能直接分配给
state
(也不能直接修改它的任何属性或它们的属性)。因为他谈到了redux,所以我假设它是作为不可变(或redux)的状态。“state”是来自redux的状态,而不是来自React的
这个。state
。。。是Store的实际状态是的,我的第二段代码实际上来自Redux上下文,而第一段则不是。很抱歉给你带来了困惑。同时感谢UXDart提供的“updateIn”示例。我假设
this.state
是标准的React state对象,它只是一个无聊的旧对象。您是否假设OP正在执行其他操作,而是使用某个不可变类?请重新编辑:
state=state.updateIn(…)
您不能在react中执行此操作。你不能直接分配给
state
(也不能直接修改它的任何属性或它们的属性)。因为他谈到了redux,所以我假设它是作为不可变(或redux)的状态。“state”是来自redux的状态,而不是来自React的
这个。state
。。。是Store的实际状态是的,我的第二段代码实际上来自Redux上下文,而第一段则不是。很抱歉给你带来了困惑。同时感谢UXDart提供的“更新”示例。嗨,T.J.,谢谢,这就是我要找的。还感谢您打电话给我,告知我没有使用setState上的回调。:)嗨,T.J.,谢谢,这就是我要找的。还感谢您打电话给我,告知我没有使用setState上的回调。:)
this.setState(({mapsList}) => {
    return {mapsList: mapsList.push(newMap)};
});