Question

我正在学习mobx，并且正在尝试做一些我认为非常简单的事情……我的商店中有一个Map对象，并创建了findOrCreate动作，但看起来好像mobx并未触发在某些情况下会放弃。

我在这里创建了一个示例：https://codesandbox.io/s/0y1v181z1v

我最初记录从0开始的地图的大小，然后调用findAndCreate方法记录创建的对象，然后调用大小。以下对尺寸的调用正确地反映了更改，但是初始调用仍显示为0。单击“添加项目”按钮并添加了另一个项目后，两个尺寸都正确地反映了地图中的项目数。

-

为了澄清其中的一条评论，我在渲染器中使用了find或create，因为实际项目中的表单字段取决于传递给父项的道具的存在。表单具有几种不同的“类型”，它们都由单个组件呈现，并且字段是根据几种不同的道具创建的。在componentDidMount方法中创建它们的建议是有效的，但是如果我使用的是SFC，该怎么办？ https://codesandbox.io/s/k10jylk1y3

Answer 1

使用React，您不需要，也不需要在render（）中设置状态（或存储）。

在componentDidMount方法中创建它们的建议是有效的，但是如果我使用的是SFC，该怎么办

当您要使用生命周期方法时，需要使用“ Statefull”或“ Class”组件或React Hooks（自16.8起）

@Tholle的类组件示例

https://codesandbox.io/s/zk8r04l16l

在SFC / FunctionComponent中的挂钩示例

const App: React.FunctionComponent = observer(({ store }) => {
    React.useEffect(() => {
       store.findOrCreateItem("test");
    }, []);
    return (
            <div>
                <div>ittr items</div>
                {Array.from(store.map$).map(([key, value]) => (
                    <div key={key}>
                        item[{key}]: {value}
                    </div>
                ))}
                <div>store.size: {store.map$.size}</div>
                <div>
                    <button onClick={store.addItem}>add item</button>
                </div>
            </div>
    );
});

结合使用带有React和MobX的ES6 Map并不会重新呈现所有更改

1 个答案: