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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何访问'key'对象reactJS的对象属性相关的知识,希望对你有一定的参考价值。

想输出这个JSON数据

我正在努力找到一种方法来输出我从Firebase中提取的数据,主要是因为我不知道如何在'date'对象中选择对象。 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的属性我不确定如何访问,这些数据是由我的应用程序中的另一部分创建的,我应该移动到更浅的状态来输出'hours','name',mintutes等属性。或者有没有办法像现在一样访问它?

提前谢谢了。

答案

我建议以这种方式将从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

另一答案

您是否在询问如何访问有问题的名称(如-LMgzJGM78f0BHbPf8cc)的属性?

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

let obj = { color: 'blue' }

let prop = 'color'

console.log(obj.color);
console.log(obj['color']);
console.log(obj[prop]);
另一答案

由于这些对象中的键是未知的,因此使用Object.keys()可能很有用。在JSX中尝试这样的事情:

鉴于:

const data = {
  "tasks" : {
    "09182018" : {
      "-LMgzJGM78f0BHbPf8cc" : {
        "name" : "Task One",
      },
      "-LMgzaEYe0tcCjpxOuPU" : {
        "name" : "Task Two",
      }
    },
  }
};

JSX:

<ul>
    {Object.keys(data.tasks).map((date) => {
        const dayTasks = tasks[date];
        return Object.keys(dayTasks).map((key) => {
            const task = dayTasks[key];
            return (
              <li>{task.name}</li>
            )
        })
    })}
</ul>

以上是关于如何访问'key'对象reactJS的对象属性的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS 访问从其他组件传递过来的 JSON 对象

reactjs中如何使用按钮保存对象

如何从JavaScript对象中移除一个属性

Vue 将数组的字段取出组成key:value形式的对象+key:value 形式的对象组成数组

Vue 将数组的字段取出组成key:value形式的对象+key:value 形式的对象组成数组

js 遍历对象 将每个子节点key补上父节点的key?