Question

我试图使用ObservableMap（也试过observable.map）。我希望在向设备添加项目时更新以下最小组件设置。我做错了什么或误解了mobx？两个console.log都会输出{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观察者对组件进行更新反应

1 个答案: