为什么这个反应组件没有使用 mobx 观察器更新

Question

我正在尝试使用ObservableMap(也尝试过observable.map(。我希望当我向设备添加项目时，以下最小组件设置会更新。我做错了什么还是误解了暴徒？两个 console.logs 都将输出{next: ƒ, Symbol(Symbol.iterator): ƒ}，并且不显示我的地图的任何数据。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observer, Provider } from 'mobx-react';
import { ObservableMap, observable } from 'mobx';
declare var Map;
const App = observer(
    ['devices', 'store'],
    ({devices, store}) => {
        console.log(store.devices.entries());
        return <div>
            {[...devices.entries()].map(([id, device]) => <div>test</div>)}
            {/* {devices.entries().map(([id, device]) => <div key={device.id}>{device.name}</div>)} */}
            test3
        </div>
})
var test = observable({
    devices: new Map([['a', 'one']])
});
setTimeout(() => test.devices.set('b', "two"), 200);
ReactDOM.render(<Provider store={test} devices={test.devices}><App /></Provider>, document.getElementById('app'));

Answer 1

我还没有移动到版本 4 及更高版本。但我的理解是ObservableMap不再存在，你应该使用observable.map.在您使整个对象observable的情况下，您只需使用 es6 本机Map：

var test = observable({ devices: new Map([['a', 'one']]) });

现在你只有一个迭代器Map enteries所以你可以使用扩展运算符或Array.from来使用数组map函数：

<div>
  {Array.from(devices.entries()).map(([id, device]) => (
    <div key={id}>{device}</div>
  ))}
  test3
</div>