使用带有React和MobX的ES6映射不会对所有更改进行重新渲染

Question

我正在学习mobx，我正在尝试做一些我认为相当简单的事情......我在我的商店里有一个Map对象并创建了一个findOrCreate动作，但似乎mobx并没有触发一些重新渲染案例。

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

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

--

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

Answer 1

使用React，你不应该，也不需要在render（）中设置state（或store）。

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

当你想使用生命周期方法时，你需要使用“Stateful”又名“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>
    );
});