代码之家 › 专栏 › 技术社区 › kyle

将es6映射与react和mobx一起使用不会重新依赖所有更改

mobx-react mobx reactjs

0

kyle · 技术社区 · 7 年前

我正在学习mobx,并试图做一些我认为相当简单的事情…我的存储中有一个map对象,并创建了findorcreate操作,但在某些情况下,mobx似乎没有触发rerenders。

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

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

——

为了澄清其中一个注释,我在呈现中使用find或create,因为实际项目中的表单字段取决于传递给父项目的道具。有几种不同的“类型”的表单都是由一个组件呈现的,并且根据几个不同的道具创建字段。在componentdidmount方法中创建它们的建议是有效的,但是如果我使用的是sfc呢? https://codesandbox.io/s/k10jylk1y3

0 回复 | 直到 7 年前

1

0

r g 7 年前

和反应你 不应该 ,也不需要在render()中设置(或存储)。

在componentdidmount方法中创建它们的建议是有效的,但是如果我使用的是sfc

当您想要使用生命周期方法时,您需要使用“statefull”aka“class”组件或react hook(从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>
    );
});