React redux -更新状态中的嵌套数组
React redux -更新状态中的嵌套数组
提问于 2017-11-23 23:20:29
我正在尝试react redux中的一些应用程序，但我在更新(推送、移除、更新)状态中的嵌套数组时遇到了问题。
我有一个名为service的对象，如下所示：
{
name: 'xzy',
properties: [
{ id: 1, sName: 'xxx'},
{ id: 2, sName: 'zzz'},
]
}无论我在带有属性集合的reducer中做了什么(在将属性添加到集合的情况下)，都会产生问题，即所有属性的值与我最近添加的最后一个属性的值相同。->添加的属性对象位于服务属性集合中，但操作将替换此集合中所有属性中的所有值。我的reducer：
export function service(state = {}, action) {
switch (action.type) {
case 'ADD_NEW_PROPERTY':
console.log(action.property) // correct new property
const service = {
...state, properties: [
...state.properties, action.property
]
}
console.log(service); // new property is pushed in collection but all properties get same values
return service
default:
return state;
}
}我尝试了一些使用不变性帮助器库的解决方案，它产生了同样的问题：
export function service(state = {}, action) {
case 'ADD_NEW_PROPERTY':
return update(state, {properties: {$push: [action.property]}})
default:
return state;
}例如，当我将新属性{ id: 1, sName: 'NEW'}添加到上面的示例中时，我将获得以下状态：
{
name: 'xzy',
properties: [
{ id: 1, sName: 'NEW'},
{ id: 1, sName: 'NEW'},
{ id: 1, sName: 'NEW'}
]
}有人能帮忙吗？:)
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-11-23 23:54:08
也要复制一份action.property。无论调度此操作的是什么，它都可能重用相同的对象。
export function service(state = {}, action) {
switch (action.type) {
case 'ADD_NEW_PROPERTY':
console.log(action.property) // correct new property
const service = {
...state,
properties: [
...state.properties,
{ ...action.property }
]
}
console.log(service); // new property is pushed in collection but all properties get same values
return service
default:
return state;
}
}
Stack Overflow用户
发布于 2017-11-24 01:15:08
我建议您使用不可变的数据https://facebook.github.io/immutable-js/docs/#/List
import { fromJS, List } from 'immutable';
const initialState = fromJS({
propeties: List([{ id: 1, sName: 'xyz' }]
}
function reducer(state = initialState, action) {
case ADD_NEW_PROPERTY:
return state
.update('properties', list => list.push(action.property));
// ...
}Stack Overflow用户
发布于 2017-11-23 23:38:41
您的服务缩减程序可能看起来有点像这样：
// Copy the state, because we're not allowed to overwrite the original argument
const service = { ...state };
service.properties.append(action.property)
return service页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47458735
复制相关文章
相似问题
腾讯云开发者
