Question

我正在尝试从react-widgets的DropdownList中加载一些json文件。当我加载json文件时，数据类型如下所示：

Map {size: 1, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}
__altered
:
false
__hash
:
undefined
__ownerID
:
undefined
_root
:
ArrayMapNode
size
:
1
__proto__
:
KeyedIterable

虽然Dropdown组件（来自react-widgets）需要一个数组！所以它出现了这个错误：

Failed propType: Invalid prop `data` of type `object` supplied to `DropdownList`, 
expected `array`. Check the render method of `Uncontrolled(DropdownList)`.

我无法直接加载json文件，我必须使用ajax加载它（或者技术上我可以，但它是一个巨大的文件，每次用户点击下拉列表，它需要几秒钟来加载数据从文件）。如何将其转换为数组？

P.S。 json文件如下所示：

{ 
"items":[ 

    { 
    "id": "aaa", 
    "name": "english" 
    }, 
    { 
    "id": "aab", 
    "name": "Swedish" 
    }, 
  ] 
}

Answer 1

我认为你正在寻找以下内容：

var dropdownList = jsonObject.items.map((item, i) => {
  return (
    <option key={i} val={item.id}>{item.name}</option>
  );
})

Array.prototype.map函数只是遍历一个列表并生成一个相同大小的新列表，但基于修饰符/回调函数进行更改。

根据评论更新：

根据DropdownList的文档，您有两个选项可以将数据传递到列表：项目名称的平面数组，或具有项目名称和值的特定键的对象列表。

选项1：项目名称的平面列表

var itemNames = jsonObject.items.map((item) => item.name );

选项2：对象列表

var items = jsonObject.items.map((item) => {
  return {
    textField: item.name,
    valueField: item.id
  }
});

使用第二个选项的好处是，当有人选择其中一个项目时，event创建的项目指向HTML val的{{1}}属性。这对你很有用，特别是因为你的id和名字不一样。一个例子：

选项1（来自上方）：

<option>

选项2（来自上方）：

<DropwdownList 
  data={itemNames}
  onSelect: (event) => {
    // Will give the `val` attribute set by DropdownList
    // This might be the item name, or it might be something unique to DrowdownList
    console.log(event.target.value);
  }
/>

在ReactJS中将可迭代的地图对象转换为数组对象

1 个答案: