Question

我正在将Redux用于React，并且尝试更改包含Map的状态，但不确定如何正确执行操作。

我正在尝试使用此处列出的更新模式（但它们仅显示对象和数组的示例）：https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

我得到了一个这样的常数图：

const propertiesMap1 = new Map([
["TITLE1",
    {
        propertyValues: {
            myProperty1 : "myVal1",
            myProperty2 : "myVal2",
            myProperty3 : "myVal3",                                                            
        },
        isOpen: true
    }
],
....

在一个数组中有2个这样的映射：const arr = [map1, map2]

我正在尝试像这样更新特定地图中的值：

function updateValueInProperties(array, index, category, value) 
{

return array.map( (item, index) => 
{
    if(index !== action.index) 
    {
        return item;
    }


    // Otherwise, this is the one we want - return an updated value
    return {
        ...item,
        item.get(category): {

        }
    };    
});

}

但是上面有编译错误。

如何精确地不变地更新地图？

Answer 1

简短回答：

要创建»更新的克隆«：new Map(oldMap).set('x', 'y')或new Map(oldMap).delete('x')。

TLDR

地图的构造函数采用可迭代方式，而地图为1。例如：

const 
  m1 = new Map().set('x1', 'y1').set('x2', 'y2'),
  m2 = new Map([...m1.entries()])
;

m1 === m2 // false;
m2.get('x1') // y1

因此，要以可以创建新地图的方式更新地图，可以使用.entries()将旧地图转换为数组，更新该数组并将其重新转换为地图。 / p>

//update a value
const updated = new Map([...m1.entries()].map(
  ([key, val]) => [
    key, 
    key == 'x1' ? `updated ${val}` : val 
  ]
));

或更短，感谢@VLAZ的所有评论

const clone = new Map(oldMap).set('x', 'y')

摘要

对于flat copy的地图，您可以使用new Map(old)并创建修改后的克隆，而不是所有新的delete()，set()或clear()方法可以使用地图。中间阵列可能为过滤等提供更大的灵活性，但会带来一定的性能成本。

如何用Javascript不变地更新地图

1 个答案: