javascript - 使用 redux-orm 引导多对多关系

标签 javascript many-to-many redux redux-orm

我有 Extent 的 aredux-orm 模型,如下所示:

const { string, number, arrayOf, oneOfType, instanceOf } = PropTypes

export default class Extent extends ValidatingModel {}

Extent.fields = {
  xmin: attr(),
  ymin: attr(),
  xmax: attr(),
  ymax: attr(),
  zoomlevel: attr(),
  tooltip: attr(),
  tooltipDelay: attr(),
  layers: many('Layer', 'extents'),
  users: fk('User', 'extents')
}

Extent.propTypes = {
  xmin: number,
  ymin: number,
  xmax: number,
  ymax: number,
  zoomlevel: number,
  tooltip: string,
  tooltipdelay: number,
  layers: oneOfType([
    arrayOf(number),
    arrayOf(
      instanceOf(Layer)
    )
  ])
}

Extent.modelName = 'Extent'

我有相关的Layer模型,其定义如下:

const {
  string,
  number,
  bool,
  any,
  oneOfType,
  instanceOf
} = PropTypes

export default class Layer extends ValidatingModel {}

Layer.fields = {
  objtype: fk('Bo', 'layers'),
  layertype: attr(),
  label: attr(),
  layertypevalue: attr(),
  geometrytype: attr(),
  opacity: attr(),
  token: attr(),
  url: attr(),
  readonly: attr(),
  isFetching: attr(),
  'default': fk('LayerConfiguration'),
  status: attr(),
  enabled: fk('LayerConfiguration', 'enabledLayers'),
  highlighted: fk('LayerConfiguration', 'highlightedLayers'),
  disabled: fk('LayerConfiguration', 'disabledLayers'),
  filtered: fk('LayerConfiguration', 'filteredLayers'),
  editing: fk('LayerConfiguration', 'editingLayers')
}

Layer.options = {
  idAttribute: 'layerId'
}

我像这样引导他们的数据:

const victoriaExtent = Extent.create({
  xmin: 144.776008,
  ymin: -37.8458979,
  xmax: 145.101998,
  ymax: -37.6845001,
  zoom: 15,
  tooltip: 'Victoria',
  tooltipDelay: 0
})

const transformer = Layer.create({
  layerId: 1,
  label: 'Transformer',
  objtype: 'EQUI',
  layertype: 'PLANPLANT',
  layertypevalue: '0001',
  geometrytype: 'Point',
  opacity: 1,
  token: null,
  url: null,
  readonly: false,
  extents: [ victoriaExtent ],
  status: 'default',
  isFetching: false,
  'default': null,
  enabled: transformerEnabledConfig,
  highlighted: highlightPointConfig,
  disabled: transformerEnabledConfig,
  filtered: transformerEnabledConfig,
  editing: editingPointConfig
})

在该状态下,我发现关系并未填充,尽管它显示在 Layer 状态下有一个用于 extentsSessionBoundModelExtentsLayer 关系模型未填充数据。

此外,当我访问范围时,我发现 extent.layers 属性是未定义

最佳答案

我还不明白为什么,但我发现从另一方处理关系(这就是它的定义)会取得成果。我将引导更改为如下所示:

const victoriaExtent = Extent.create({
  xmin: 144.776008,
  ymin: -37.8458979,
  xmax: 145.101998,
  ymax: -37.6845001,
  zoom: 15,
  tooltip: 'Victoria',
  tooltipDelay: 0,
  user: spilli,
  layers: [
    transformer
  ]
})

当我在 layers 选择器中使用以下语句时,采用这种定义方式:

const layers = layerGroup.layers.toModelArray().map(layer => {
      const obj2 = layer.ref
      let enabled = layer.enabled
      let extents

      if (enabled && enabled.icon) {
        const enabledRef = enabled.ref
        const icon = enabled.icon.ref
        enabled = Object.assign({}, enabledRef, { icon })
      }

      if (layer.extents) {
        extents = layer.extents.toRefArray()
      }

      return Object.assign({}, obj2, { enabled, extents })
    })

关于javascript - 使用 redux-orm 引导多对多关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41731718/

相关文章:

ruby-on-rails - 在 Ruby on Rails 中的多对多关系中,如何使用父表表单中的数据在连接表中创建记录?

reactjs - 在 redux 中使用 React Router 时如何修复黑屏

javascript - 如何使用 multer-gridfs-storage、express、mongodb 在用户配置文件中添加图像路径

javascript - Select2 + 自定义滚动条

asp.net-mvc - 在 MVC 创建 View 上保存多对多关系数据

MySQL 基于连接表限制结果

javascript - AngularJS $templateCache 无法处理 url 参数

javascript - 数据库生成的下拉列表在选择时为更多变量提供来自同一数据库的值

javascript - 不可变对象(immutable对象)的扩展运算符与 JSON.parse(JSON.stringify(...))

reactjs - 在另一个展示组件中包含一个展示组件是一种反模式吗?