无法列出对象中的键

Question

我有一个状态变量projects，它应该存储一个数组字典，其中键是拥有该项目的组织的 ID，该数组由存储有关项目信息的对象组成。例如：

{
    orgId123: [
        project1: {
            name: "my cool project",
            status: "submitted"
        },
        projectAwesome: {
            name: "Stan's project",
            status: "draft"
        }
    ],
    orgUSA: [
        newProj234: {
            name: "another great project",
            status: "submitted"
        }
    ]
}

我尝试使用 Objects.keys(projects) 获取所有组织 ID 的列表，但是 returns 是一个空数组。

我怀疑我的 projects 变量结构有误。当我 console.log projects 的内容时，我得到：

注意根级对象是如何表示 {}.

当我尝试重新创建 projects 变量的外观并记录下来时，我看到了一个略有不同的输出：

在此手动创建的对象中，根级对象显示为 {orgId1}: Array(1) 而不是之前显示的 {}（在实际对象上）。

关于对象的结构以及为什么我无法使用 Object.keys() 从第一个对象获取键列表，这说明了什么？

对于上下文，我使用以下代码创建原始变量：

async function fetchProjects() {

    // Load list of organisations that the user is a member of
    const organisationsSnapshot = await getDocs(query(
        collection(db, 'organisations'),
        where(`members.${user.uid}`, '!=', null)
    ))
    const organisations = organisationsSnapshot.docs.map(organisationSnap => ({
        ...organisationSnap.data(),
        id: organisationSnap.id
    }))

    // Load list of projects for each organisation the user is a member of
    const projectsDict = {}
    organisations.forEach(async (organisation) => {
        const projectsQuery = query(collection(db, `organisations/${organisation.id}/projects`))
        const projectsSnap = await getDocs(projectsQuery)
        projectsDict[organisation.id] = projectsSnap.docs.map(projectSnap => ({
            ...projectSnap.data(),
            id: projectSnap.id
        }))
    })
    setProjects(projectsDict)
}

Answer 1

您不能拥有 key:value 的数组。你应该把它包装在 {}.

[ key1: value1, key2: value2, ] //Unexpected Token
[ { key1: value1 }, { key2: value2 }, ] //Good to go

所以代替：

{
    orgId123: [
        project1: {
            name: "my cool project",
            status: "submitted"
        },
        projectAwesome: {
            name: "Stan's project",
            status: "draft"
        }
    ],
    orgUSA: [
        newProj234: {
            name: "another great project",
            status: "submitted"
        }
    ]
}

你应该有：

{
    orgId123: [
        {  
          project1: {
            name: "my cool project",
            status: "submitted"
          }
        },
        {  
          projectAwesome: {
            name: "Stan's project",
            status: "draft"
          }
        }
    ],
    orgUSA: [
        { 
          newProj234: {
            name: "another great project",
            status: "submitted"
          }
        }
    ]
}

或

{
    orgId123: {
        project1: {
            name: "my cool project",
            status: "submitted"
        },
        projectAwesome: {
            name: "Stan's project",
            status: "draft"
        }
    },
    orgUSA: {
        newProj234: {
            name: "another great project",
            status: "submitted"
        }
    }
}

老实说，我会按如下方式构建您的 projects：

const organisations = [{
    orgId: "orgId123",
    projects: [{
      projectId: "project1",
      name: "my cool project",
      status: "submitted"
    }, {
      projectId: "projectAwesome",
      name: "Stan's project",
      status: "draft"
    }]
  },
  {
    orgId: "orgUSA",
    projects: [{
      projectId: "newProj234",
      name: "another great project",
      status: "submitted"
    }]
  }
]

//This way, organisations is an array of organisations,
//which is an object that has orgId, projects which is an array of its projects.

//It will be much more intuitive to work with while iterating over it.
//Such as if you need to display all the orgIds,
console.log("Organisation IDs:")
for (const org of organisations) {
  console.log(org.orgId)
}
console.log("=================");

//If you need all project IDs and names:
console.log("Projects:")
for (const org of organisations) {
  console.log(`Organisation ${org.orgId} has the following projects:`)
  for (const proj of org.projects) {
    console.log(`Project ID ${proj.projectId}: ${proj.name}`)
  }
  console.log("=================");
}
console.log("=================");

无法列出对象中的键

Cannot list keys within object

javascript

reactjs