Question

我正在使用npm组件React Sortable Tree来显示一些我从.json文件（data.json）中提取的数据：

{
  info: "success",
  data: [
    {
      id: null,
      name: "Arizona",
      type: "REGION"
    },
    {
      id: null,
      name: "Alabama",
      type: "REGION"
    },
    // ...
  ]
}

可排序树组件需要状态为treeData的数组，其组成如下：

treeData: [
  {title: 'Arizona'},
  {title: 'Alabama'},
  // ...
]

但是我不想硬编码这些值，而是要从.json文件中提取它们。我尝试使用键值对数组，其中键是“ title”，值是data.data [i] .name，但是无法将其推入状态：

setTree () {
  this.setState({
    {for(var i; i < data.data.length; i++){
      var title = "title";
      var name = data.data[i].name;
      var pushVal = {};
      pushVal[title] = name;
      treeData.push(pushVal);
    }}
  }
}

Answer 1

您可以尝试：

const treeData = data.data.map(item => ({ title: item.name }));

Answer 2

您应该查看地图原型并进行解构以使事情变得简单

有两件事

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

解构只是从传递的项目中挑选参数。

并在数组上进行映射只会循环遍历每个项目，并返回修改后的项目的新数组。

const json = {
  "data": [{
      "id": null,
      "name": "Arizona",
      "type": "REGION",
    },
    {
      "id": null,
      "name": "Alabama",
      "type": "REGION",
    }
  ]
}

const tree = json.data.map(({ name: title }) => ({ title }))

console.log(tree)

如何通过从json文件中提取数据来将键值对数组加载到状态中？

2 个答案: