.map（）通过带有Mobx Observable Map的键

Question

我定义了这样的地图：

class A {
  @observable myMap = new Map();
}

在反应组件中：

class B extends Component {
  store = new A();

  render() {
    const { myMap } = this.store;

    return <div>
      {/* I want to do the equivalent of this: */}
      {Object.keys(myMap).map(key => <p>{key}: {myMap.get(key)}</p>)}
    </div>;
  }
}

这可能是一个简单的问题，但我没有找到如何做到这一点，除了将myMap转换为toJs()的普通JS对象，我不想这样做。

谷歌搜索对地图，地图，对象......关键字没什么帮助。

Answer 1

根据地图规范和mobx文档：https://mobx.js.org/refguide/map.html

您可以直接在地图上致电.keys()：

{myMap.keys().map(key => <p>{key}: {myMap.get(key)}</p>)}

编辑：对不起，我没有意识到迭代器不包含地图功能。你可以自己做：

解决方案

您可以创建自己的迭代器映射函数：

var x = new Map();
x.set('test','asdf')

console.log(map(x.keys(),(x) => 'prefix:'+x ))

function map(iterator, mapFn){
  var result = [];
  for(var item of iterator){
    result.push(mapFn(item)); 
  }
  return result;
}

另一个解决方案是将迭代器变为数组：

Array.from(map.keys()).map(...) // array map function of all keys.

hacky原型方法

你可以用一种hacky方式制作扩展方法，可能不适用于所有浏览器！：

//Warning this hacky way:
var t = new Map();
t.keys().__proto__.map = function(mapFn){
  return map(this, mapFn);
}

t.keys().map(x=> x) // now usable!