Question

我需要将react-widgets下拉列表与groupby属性一起使用。一个典型的例子是：

<Multiselect
  data=[{name:'Dan' lastName:'Black'}, {name:'Man' lastName:'Black'}]
  textField='name'
  groupBy='lastName'
/>

但我拥有的数据阵列具有完全不同的结构。等;

[
   {
     name:'test one',
     objects: [{key:'my key', value:'my value'},
                {key:'my key1', value:'my value1'}
                {key:'my key2', value:'my value2'}]
   },
   {
     name:'test two',
     objects: [{key:'my key', value:'my value'},
                {key:'my key1', value:'my value1'}
                {key:'my key2', value:'my value2'}]
   }
]

我需要＆＃39;键＆＃39;是＆＃39; name＆＃39;列表中显示的值和groupby。

这是可能实现还是完全愚蠢，我必须完全重组它？

每个对象数组实际上是100个或更多对象。所以我不希望因性能问题而再次重构它。

提前致谢，欢迎所有想法！

更新

<DropdownList
    data = {
    [{
        repoName: 'google repository',
        objects: [
            {
                key: 'mykey',
                method: 'my meth',
                value: 'my val'
            },
            {
                key: 'mykey2',
                method: 'my meth2',
                value: 'my val2'
            }]
    }]}
     textField='objects.key'
     placeholder={placeholder}
     groupBy='repoName'
   />

给出类似的东西;

google repository
[Object Object]

如何迭代该对象数组以避免这种情况？

Answer 1

根据我的理解，您可以做的是使用现有数据为数据创建不同的结构。

const data = [{
  name: 'test one',
  objects: [{
    key: 'my key',
    value: 'my value'
  }, {
    key: 'my key1',
    value: 'my value1'
  } {
    key: 'my key2',
    value: 'my value2'
  }]
}, {
  name: 'test two',
  objects: [{
    key: 'my key',
    value: 'my value'
  }, {
    key: 'my key1',
    value: 'my value1'
  } {
    key: 'my key2',
    value: 'my value2'
  }]
}]
const newData = []
data.forEach((element) => {
  const name = element.name
  if (element.objects && element.object.length) {
    element.objects.forEach((keyValueData) => {
      newData.push({
        name,
        key: keyValueData.key,
        value: keyValueData.value,
      })
    })
  }
})


< Multiselect
data = {
  newData
}
textField = 'name'
groupBy = 'key' / >

这样，它应该解决你的问题。代号未测试代码

如何使用具有groupby属性的React-widget Dropdownlist

1 个答案: