使用 ReactJS 选择一些 JSON 数据时遇到问题答案

【问题标题】：Trouble selecting some JSON data with ReactJS使用 ReactJS 选择一些 JSON 数据时遇到问题
【发布时间】：2021-01-19 16:21:04
【问题描述】：

我创建了一个简单的组件来组织名称，但是在我的 JSON 文件中获取名称时遇到了麻烦。

这是我的 JSON 文件的样子

{
  "tasks" : [
    { 
      "id": 1, 
      "name": "Studies", 
      "status": "Completed", 
      "progress": 100
    },
    { 
      "id": 2, 
      "name": "Writing",
      "status": "In Progress", 
      "progress": 91
    }
  ]
}

还有我的 React 组件中的函数

function orderA() {
  data.tasks.map((t) => 
    console.log(t.name)
  );
  const noms = data.tasks.name;
  noms.sort();
  console.log(noms);
}

我通过单击按钮调用该函数，console.log(t.name) 显示我需要使用的名称，但 data.tasks.name 给我一个未定义的错误，但如果我将名称放入我的 const 我的函数正在工作。

【问题讨论】：

我想指出，你在做data.tasks.map(t => console.log(t.name))，你应该使用data.tasks.forEach(t => console.log(t.name))。结果是一样的，但是.map-function 用于转换数组中的数据，而.forEach-function 用于对数组中的每个项目执行一个（或多个）操作（就像你是正在做）。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript json reactjs parsing

【解决方案1】：

您需要访问循环内的名称，因为data.tasks 是一个数组：

orderA() {
  const noms = data.tasks.map((t) => t.name).sort();
  console.log(noms);
}

【讨论】：

【解决方案2】：

这是因为当您设置 noms 变量时，您将访问 tasks 这是一个数组。而且您正在引用没有 name 属性的完整 tasks 数组。

您需要遍历tasks 数组或选择数组的特定位置，然后访问该数组位置中对象的name 属性。

例如：data.tasks[0].name.

【讨论】：