immutable.js映射到数组(列表)并添加属性

Ben*_*Ben 4 javascript immutable.js

我只是从immutable.js开始,在弄清楚如何在数组中的对象上设置新属性时遇到了麻烦。我无法在此类更改的文档中找到任何示例。

我基本上只是想对此进行更改:

[{ 
  gitInfo: {id: 8001, host: '', …},
  module: {id: 24875, name: "blah", …}
}...]
Run Code Online (Sandbox Code Playgroud)

对此:

[{ 
  gitInfo: {id: 8001, host: '', …},
  module: {id: 24875, name: "blah", isStared: true …}
}...]
Run Code Online (Sandbox Code Playgroud)

因此,如果没有immutable.js,我将有类似以下内容:

function markModules(modules) {
    modules.map( (module) => {
      module.module.isStarred = false;
      if (contains(this.props.stars, module.module.id)) {
        module.module.isStarred = true;
      }
    })
    return modules;
  }
Run Code Online (Sandbox Code Playgroud)

我假设我需要带有List的set()之类的东西,但是同样,我没有找到任何执行此操作的示例。

感谢您提供的任何提示或示例链接。

Luq*_*aan 5

您将以与没有Immutable.js(.map)时相同的方式进行操作。

const data = Immutable.fromJS([{ 
  gitInfo: {id: 8001, host: ''},
  module: {id: 24875, name: "blah"}
}, { 
  gitInfo: {id: 6996, host: ''},
  module: {id: 666, name: "wef"}
}]);

const transformed = data.map((x) => {
    return x.get('module').set('isStarred', true);
})

transformed.toJS() === [
  {
    "id": 24875,
    "name": "blah",
    "isStarred": true
  },
  {
    "id": 666,
    "name": "wef",
    "isStarred": true
  }
]
Run Code Online (Sandbox Code Playgroud)

如果要在其中添加额外的逻辑:

function markModules(modules) {
  return modules.map((module) => {
    const isStarred = contains(this.props.stars, module.getIn(['module', 'id']));
    return module.setIn(['module', 'isStarred'], isStarred);
  })
}
Run Code Online (Sandbox Code Playgroud)

关键是将if语句转换为返回值的值/函数,而不是更新数据结构。