javascript - 错误 : [mobx-state-tree] Failed to resolve reference XXX to type 'User'

标签 javascript reactjs mobx mobx-state-tree

上下文

我有一个由 mobx-state-tree (MST) 支持的 React 应用程序。其中一个页面进行两次并行 API 调用以获取Projects 列表和系统Users 列表。

然后将这两个 API 的响应作为快照应用到同一树中的两个兄弟节点。项目模型的所有者字段引用用户模型。

我的问题是 GET 项目 API 调用通常比 GET 用户 API 调用更早完成。经典的“竞争条件”。因此,当 MST 尝试取消引用所有者值时,具有此类标识符的用户在树中不可用,并且我收到如下运行时错误:

Error: [mobx-state-tree] Failed to resolve reference 'dtGNbVdNOQIAX0OMGaH2r2oSEf2cMSk9AJzPAf4n7kA' to type 'User' (from node: /projectListStore/projects/0/owner)

问题

我该如何解决该错误?

请注意 API 调用相互依赖(awaitusers.load().then(users => { projects.load( ); ) 不是我们项目的选项。

MST 模型

export const ProjectModel = types
  .model('Project', {
    projectId: types.optional(types.identifierNumber, 0),
    title: '',
    descriptionStatus: '',
    projectStatus: '',
    startDate: CustomDate,
    endDate: CustomDate,
    owner: types.maybeNull(types.reference(User)), // -----
  })                                                        \ 
  // ...                                                     |
                                                             |
export const User = types                                    |
  .model('User', {                                          /
    userId: types.identifier,                      // <<<--
    userName: '',
    firstName: '',
    lastName: '',
    email: '',
    lastVisited: CustomDate,
  })
  // ...

API 示例

GET https://service.com/api/users

[
  {
    "userId": "g-gqpB1EbTi9XGZOf3IkBpxSjpAHM8fpkeL4YZslEL8",
    "userName": "john.doe@service.com",
    "firstName": "John",
    "lastName": "Doe",
    "email": "john.doe@service.com",
    "lastVisited": "2018-01-18T17:32:48.947"
  },
  {
    ...
  },
  ...
]

GET https://service.com/api/workmanagement/projects?minStartDate=&maxStartDate=2018-11-24&status=Active

[
  {
    "projectId": 1,
    "title": "Project Title",
    "description": "Praesent luctus vitae nunc sed condimentum. Duis maximus arcu tortor, vitae placerat enim ultrices sed. Etiam scelerisque gravida justo, vitae venenatis dui pellentesque eu.",
    "projectStatus": "active",
    "startDate": "2018-08-20T00:00:00",
    "endDate": "2019-07-01T00:00:00",
    "owner": "g-gqpB1EbTi9XGZOf3IkBpxSjpAHM8fpkeL4YZslEL8",
  },
  {
    // ...
  },
  ...
]

最佳答案

听起来您可能会在创建项目模型后加载用户数据 它可能就像使用后期引用一样简单。听起来,这意味着在创建此模型后可能创建的任何类型。

而不是这个 所有者:types.maybeNull(types.reference(User))

试试这个 所有者:types.maybeNull(types.late(() => types.reference(User)))

关于javascript - 错误 : [mobx-state-tree] Failed to resolve reference XXX to type 'User' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53464439/

相关文章:

javascript - meteor JS : Show/Hide leaving blank divs

javascript - 如何让视频在暂停时淡出 - HTML

reactjs - NavLink onActive 回调

reactjs - 无法对未安装的组件执行 React 状态更新?

reactjs - 如果对象已经是同一或另一个状态树的一部分,则无法将对象添加到状态树

javascript - 为什么具有相同语法的数组定义不同 - JavaScript

Javascript代码按顺序运行

javascript - Nextjs 重新加载页面时获取数据

javascript - Mobx 监听一个值的变化与计算不起作用

reactjs - 在 React 组件之外访问 MobX 状态?