问题标签 [mobx-state-tree]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
370 浏览

reactjs - 升级到 mobx-react@6.0.0 会导致死循环

我刚刚从一个版本升级mobx-react@5.4.4到另一个版本6.0.0,我的应用程序完全崩溃了。它没有启动,而是消耗了越来越多的内存,直到崩溃。我正在寻找的是关于如何最好地处理它的建议......堆栈跟踪和我检查的任何变量都没有给我任何提示我的代码的任何部分。

我很确定,我在做奇怪的事情(我在 react/mobx 方面缺乏经验并且来自 OO),但这就是我现在可以做的。我怀疑一些autoruns 和类似的东西,但删除它们并没有改变。我试图删除部分代码(直到除了错误之外什么都没有),但这需要太长时间。

这个问题是完全可重现的(现在通过降级解决)。使用5.4.4,一切运行顺利(性能良好,没有错误,没有警告,...)。

升级时,我遇到了“disposeOnUnmount 仅支持 React.Component 或 React.PureComponent 的直接子类”的问题,但这很容易解决。可能有类似的东西(一个现在实现方式不同的实用程序,我正在以一种奇怪的方式使用它),但我试图删除所有可疑的东西但没有成功。

这是堆栈跟踪:

这是package.json(AFAIK一切都在“最新”)的可能相关部分:

0 投票
1 回答
1483 浏览

react-native - How to create types.array in MST from external api - always returning proxy not object

I'm fetching data from external API, and want to store it in MST store as array. But the result is always proxy, not the object I wanted.

This is result from API:

This is my store:

And this is console.log of my MST store:

Does anyone know how to deal with this kind of problem?

0 投票
2 回答
944 浏览

reactjs - 使用 Mobx 状态树在路由更改时停止 Axios 请求?

我正在使用 axios,我注意到有人去 Route A 然后快速单击一个按钮到 Route B Route A 请求仍将运行,并且可能会发生奇怪的结果。

我正在做这样的事情

所以我不确定取消这些请求的最佳方法是什么。

0 投票
1 回答
2504 浏览

reactjs - mobx-state-tree 将 `""` 转换为 `AnonymousModel[]` 时出错

我收到此错误,但我不知道为什么。我正在运行 mobx 状态树(3.2.4)

我看不到任何迹象表明我正在尝试将空字符串设置为数组。

我怎样才能确定它试图应用什么属性?

0 投票
1 回答
139 浏览

typescript - TypeScript 3.5 中的直接或间接引用

我们正在使用一个库 mobx-state-tree,其中包含相当复杂的 TypeScript 声明,这些声明对我来说很难破译。

无论哪种方式,似乎 TS 3.4 和 3.5 之间发生了一些变化,导致了一个奇怪的问题。

在此处输入图像描述

我在存储库中准备了一个最小的复制品:https ://github.com/FredyC/mobx-state-tree-ts3.5

我知道这可能是一个非常具体的问题,需要深入研究。至少会欣赏正确的方向,TS 3.5 中的哪些变化可能会导致这样的问题。

更新

根据答案https://stackoverflow.com/a/56781615/902813我调整了回购中的示例并得到了类似的错误。似乎 mobx-state-tree 可能滥用了 TS 中的一些错误,这些错误在 3.5 中得到了修复,现在它破坏了一些东西。

在此处输入图像描述

0 投票
1 回答
1507 浏览

javascript - 如何使用 React Context 在组件之间共享 Mobx-State-Tree 存储

我目前Mobx-State-Tree用于管理我的 React 应用程序中表单的所有状态。我面临的问题是我想在表单的原子设计之后在页面级别创建商店,并通过 React Context 将商店传递给必要的组件,但我想避免将我的子组件包装在<Observer>标签中from Mobx-react,或者在我的孩子身上使用某种自定义包装器来消耗商店并将其作为道具传递给孩子。

必须有一个最佳实践吗?该Mobx-react文档指出:

"可以 读取 通过 使用 提供 的 商店Provider,React.useContext通过 使用MobXProviderContext可以 导入 的 上下文mobx-react. "

但是我找不到任何例子或解释如何最好地实施MobXProviderContext?我当前的设置如下(为了演示情况而进行了极大的简化):

最终我对如何避免子组件上的嵌套感兴趣?我应该如何构建子组件?我将其应用到的情况是表单的状态管理,因此存储数据不断更新,因此孩子观察存储中值的任何更新至关重要。

希望这是有道理的,并且非常感谢有关如何最好地解决此问题的任何指导!

0 投票
2 回答
1617 浏览

mobx-state-tree - 当我拖放和项目时 UI 闪烁

我在让 react-beautiful-dnd 工作而不闪烁时遇到问题。我遵循了蛋头课程中的示例。这是我的代码示例。

项目列表容器

项目类别

列出项目

项目

重新排序项目的方法(我正在使用 Mobx-State_Tree)

样本数据

概括

当和项目被拖放时,我检查该项目是否被放置在 dnd 上下文之外或放置在它被拖动的相同位置。如果是真的,我什么都不做。如果该项目被丢弃在上下文中,我检查它是否被丢弃在同一类别中。如果为真,我将项目从其当前位置移除,将其置于目标位置,更新我的状态,并进行 API 调用。

如果它被放到不同的类别中,我从源类别中删除该项目,添加到新类别,更新状态并进行 API 调用。我错过了什么吗?

0 投票
1 回答
1724 浏览

javascript - 使用参数 mobx-state-tree 执行异步操作

使用 mobx-state-tree 我想将参数传递给异步操作。他们建议使用生成器功能。他们的示例不提供使用参数的示例,而且我发现如何做到这一点并不明显。

我尝试将流函数包装在普通函数中以向下传递参数。但是它不起作用。我尝试了下面的示例,包括一些额外的摆弄。


在流函数中传递参数时,它不会编译,当我包装函数时,它只打印 console.log("inside inner")

如何将参数传递给异步操作函数?

0 投票
1 回答
245 浏览

javascript - 使用 this.state 将 react 应用程序转换为 mobx

我使用 react 在 javascript 中创建了一个待办事项列表,因为我是 react 的初学者,所以我使用“this.state”在多个组件中更改我的应用程序的状态,我的问题是在面试时我被分配了一项任务使用 mobx 创建待办事项列表来运行其状态,但是经过长时间的研究,我仍然有很多转换我的反应项目的“this.state.todo”的问题,这是代码中的主要应用程序组件,我希望演示如何将状态转换为 mobx 观察者/可观察者,如果需要更多组件,我希望添加它们

0 投票
1 回答
265 浏览

javascript - mobx/mobx-state-tree 中的可重用操作

我有多个 mobx 商店,发现自己在每个商店中都有几乎相同的操作。因此,我希望能够在商店之间推广和重用它们。下面我尝试打破创建操作,希望能够将其导入多个商店,但由于 self 不可用,它不起作用。

我想从这个出发:

对于这样的事情,创建操作可以在其他商店中重用:

关于如何实现这一目标的任何想法?