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

Question

我正在尝试使用 ObservableMap（也尝试过 observable.map）。当我将项目添加到我的设备时，我希望以下最小组件设置能够更新。我是在做错什么还是误解了 mobx？ 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 native 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>

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

Why isn't this react component updating with mobx observer

reactjs

mobx