如何访问'key'对象reactJS的对象属性

Question

想输出这个 JSON 数据

我正在努力寻找一种方法来输出我从 Firebase 中提取的数据，主要是因为我不知道如何选择“日期”对象中的对象。 Firebase 自动生成这些密钥： -LMgzJGM78f0BHbPf8cc 。

我无法输出如上命名的对象的属性 ^ 我尝试使用嵌套的 for(in) 循环。

这是我目前使用的代码：

从数据库中提取数据

 componentDidMount() {
    axios.get('./tasks.json')
      .then(response => {
        const fetchedTasks = [];
        for (let date in response.data) {
          fetchedTasks.push({
            ...response.data[date],
            date: date,
          });
          for (let item in response.data[date]) {
            fetchedTasks.push({
              ...response.data[date[item]],
              id: item
            })
          }
        }
        this.setState((prevState, props) => {
          return {
            taskList: fetchedTasks,
            loading: false
          }
        })
      })
      .catch(error => console.log(error));
  }

将状态映射到 JSX 元素，仅输出类似 props.name ：

   {this.state.taskList.map((array, index) => (
            <CompleteTask
              key={array.date}
              taskName={array.date}
            />
          ) )
        }

这是一个数据作为 JSON 文件的示例，它被设置为我的应用程序中的状态：

 {
  "tasks" : {
    "09182018" : {
      "-LMgzJGM78f0BHbPf8cc" : {
        "hours" : 0,
        "end" : "2018-09-18T14:02:25.022Z",
        "minutes" : 0,
        "name" : "sadflkjdsalkf",
        "seconds" : 2,
        "start" : "2018-09-18T14:02:22.508Z"
      },
      "-LMgzaEYe0tcCjpxOuPU" : {
        "hours" : 0,
        "end" : "2018-09-18T14:03:38.635Z",
        "minutes" : 0,
        "name" : "safd",
        "seconds" : 2,
        "start" : "2018-09-18T14:03:36.353Z"
      }
    },
  }
}

关键元素的属性 -LMgzaEYe0tcCjpxOuPU 我不确定如何访问，这些数据是由我的应用程序中的另一个部分创建的，我是否应该移动到更浅的状态以输出’小时’的属性，’ name’，mintutes 等，或者有没有办法像现在一样访问它？

提前谢谢了。

原文由 J T 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我建议以这种方式将从 Firebase 接收到的对象转换为数组：

 const formattedTasks = [];

const tasks = Object.values(data.tasks);

tasks.forEach(task =>
  Object.entries(task).forEach(([key, value]) =>
    formattedTasks.push({ name: key, data: value })
  )
);

因此，您将通过 formattedTasks 数组进行映射。

这是一个工作示例： https ://codesandbox.io/s/l348nnkv9q

原文由 Taras Yemets 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您是在询问如何访问名称有问题的属性，例如 -LMgzJGM78f0BHbPf8cc 吗？

如果是这样，您可以使用方括号语法通过属性名称访问对象属性，而不是 object.property 表示法：

 let obj = { color: 'blue' }

let prop = 'color'

console.log(obj.color);
console.log(obj['color']);
console.log(obj[prop]);

如果不是，请尝试更清楚地说明您当前的问题是什么。

原文由 connexo 发布，翻译遵循 CC BY-SA 4.0 许可协议