如何映射 JSX 中的 ImmutableJS 映射列表？

Question

我在 Redux 存储中有一个 ImmutableJS 结构，如下所示：

Immutable.fromJS([{
  foo: 'bar'
}, {
  foo: 'baz'
}]);

它被映射到我的 React 组件中的 this.props.items。在我的 React 渲染函数中，我正在尝试这样做：

this.props.items.map(item => {
  return (
    <div>{item.foo}</div>
  );
});

未呈现任何内容。但是，如果我 .toJS() 列表如下，那么它会起作用：

this.props.items.toJS().map(item => {
  return (
    <div>{item.foo}</div>
  );
});

我的问题是：.toJS() 是执行此操作的正确方法吗？如果不是，我做错了什么？

Answer 1

如果您将 item.foo 替换为 item.get('foo')，您就可以开始了。函数 Immutable.fromJS 深度转换为不可变结构。

How to map over an ImmutableJS List of Maps in JSX?