Reactjs 使用带有React和MobX的ES6映射不'；t重新加载所有更改

我正在学习mobx，我想做一些我认为相当简单的事情。。。我的商店里有一个Map对象，并创建了一个findOrCreate操作，但在某些情况下，mobx似乎并没有触发rerenders

我在这里创建了一个示例：

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

--

---

为了澄清其中一条注释，我在渲染中使用find或create，因为实际项目中的表单字段取决于传递给父级的道具。有几种不同的“类型”表单，它们都是由单个组件呈现的，字段是根据几种不同的道具创建的。在componentDidMount方法中创建它们的建议是有效的，但是如果我使用的是SFC呢

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

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

当您想要使用生命周期方法时，您需要使用“Statefull”即“Class”组件或React钩子（从16.8开始）

通过@Tholle分类组件示例

钩住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>
    );
});

const-App:React.FunctionComponent=observer（{store}）=>{
React.useffect（（）=>{
store.findOrCreateItem（“测试”）；
}, []);
返回(
ittr项目
{Array.from（store.map$）.map（[key，value]）=>(
项[{key}]：{value}
))}
store.size:{store.map$.size}
添加项
);
});

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

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

当您想要使用生命周期方法时，您需要使用“Statefull”即“Class”组件或React钩子（从16.8开始）

通过@Tholle分类组件示例

钩住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>
    );
});

const-App:React.FunctionComponent=observer（{store}）=>{
React.useffect（（）=>{
store.findOrCreateItem（“测试”）；
}, []);
返回(
ittr项目
{Array.from（store.map$）.map（[key，value]）=>(
项[{key}]：{value}
))}
store.size:{store.map$.size}
添加项
);
});

为什么直接在render方法中调用

findOrCreateItem

？那可能不是你想要的。如果您改为在例如..@Tholle中调用它，则特定的示例会简化，但我有几个表单字段，它们根据从父组件传递的道具而存在。如果我使用的是无状态功能组件，没有生命周期方法，该怎么办？然后我认为值得后退一步，重新思考一下方法。您不应该在渲染时直接更改观察值，就像您不应该在渲染时直接调用

this.setState

一样。为什么您要在渲染方法中直接调用

findOrCreateItem

？那可能不是你想要的。如果您改为在例如..@Tholle中调用它，则特定的示例会简化，但我有几个表单字段，它们根据从父组件传递的道具而存在。如果我使用的是无状态功能组件，没有生命周期方法，该怎么办？然后我认为值得后退一步，重新思考一下方法。您不应该在渲染时直接更改观察值，就像您不应该在渲染时直接调用

this.setState

一样。