.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!

.map() 通过带有 Mobx Observable Map 的键

.map() through keys with a Mobx Observable Map

mobx

解决方案

hacky 原型方法