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

如何使用不可变js取消移动列表中的每个元素?

immutability redux reactjs list javascript

MingtyeP · 技术社区 · 7 年前

我想取消不可变列表中数组的每个元素的移位

我被处决的结果如下。 enter image description here

-&燃气轮机;列表[列表[新建元素],元素,元素,元素]

我想要这个结果。

-&燃气轮机;列表[新建元素,元素,元素,元素]

我怎样才能修复它?

case types.MEMO_LIST_SUCCESS:

    if (action.listType === 'new') {        
        if(action.data.length !== 0) {
            return state.setIn(['memoList', 'status'], 'SUCCESS')
                                .setIn(['memoList', 'data'], data.unshift(fromJS(action.data)));
        } else {
            return state.setIn(['memoList', 'status'], 'SUCCESS')
        }
    }

1 回复 | 直到 7 年前

JJWesterkamp 7 年前

来自表达式 action.data.length 在代码示例中,似乎应该迭代 action.data 并将每个项目添加到 data .

如果 行动数据 是数组或其他iterable, fromJS(action.data) 会给你一个新的 List .

你可以使用 Array.prototype.reduce 并通过 数据 作为累加的初始值,通过迭代将其相加 行动数据 :

if (action.listType === 'new') {
    const newData = action.data.reduce((acc, item) => acc.unshift(fromJs(item)), data);
    return state
        .setIn(['memoList', 'status'], 'SUCCESS')
        .setIn(['memoList', 'data'], newData);
}

或者更简单,使用 List::concat 方法

请注意,上面的示例颠倒了中项目的顺序 行动数据 ,而下面的示例没有。

此外,上面的示例会转换每个 item 到不可变 列表 或 Map 如果是阵列响应。对象,而下面的示例没有。

if (action.listType === 'new') {
    return state
        .setIn(['memoList', 'status'], 'SUCCESS')
        .setIn(['memoList', 'data'], fromJS(action.data).concat(data));
}