在反应中，如何将对象存储在数组中并将数组索引迭代1？

Question

我有一个显示多个框的页面，每个框都属于特定的公司。每个公司都有多个项目，每个项目都有多个版本。

方框 1： 公司名称/项目名称/版本名称

方框 2： 公司名称/项目名称/版本名称

我有一个这样定义的状态：

this.state = {
  companies: [],
  projects: [],
  releases: [],
  activeProjects: []
}

在这里，我正在从数据库中获取所有数据：

componentWillMount() {
  getCompanys().then(companies => {
    const projectPromises = companies.map((company) => {
      getProjects(company).then(projects => {
        const releasePromises = projects.map((project) => {
          return getReleases(project).then(releases => {
            if(projects.length > 0 || releases > 0) {
              this.setState({
                companies: companies,
                projects: projects,
                releases: releases
              });
            }
          })
        })
      })
    });
  })
}

返回以下数据：

Companys:  (2) [{…}, {…}]0: {_id: {…}, company_name: "IBM", …}
Projects:  [{…}]0: {_id: {…}, project_name: "Project 101", …}
Releases:  (3) [{…}, {…}, {…}]0: {_id: {…}, release_name: "Release 103", …}

我将获得 2 个公司、1 个项目和 3 个版本。

如果我想将我的每个公司、项目和版本存储到我的 activeProjects 数组中，我将如何实现以下目标？

activeProjects: [
  {
    company: ,
    project: ,
    release: 
  },
  {
    company: ,
    project: ,
    release: 
  },
]

有人可以帮帮我吗？

我希望我的最终结果是这样的：

activeProjects.map((project, index) => {
  return(
    **Box 1**
    IBM / Project 101 / Release Name goes here

    **Box 2**
    Facebook / Project 102 / Release Name goes here
  )
});

Answer 1

我建议从一开始就以所需的格式构建您的数据。我的意思是，与其将您的公司、项目和版本拆分为您所在州的单独数组，不如从一开始就将它们嵌套。

（从您的代码中我也可以看出，您每次都在覆盖项目和发布，因此您只剩下最后一家公司的项目和最后一个项目的发布。）

1.第一个结构状态如下：

state = {
    companies: [],
    activeProjects: []
}

2. 然后将您的 componentWillMount 方法改写成这样（我也建议使用 async/await 而不是回调，以便于阅读）。

async componentWillMount() {
    const companies = await getCompanies();
    for (const company of companies) {
        company.projects = await getProjects(company);
        for (const project of company.projects) {
            project.releases = await getP
        }
    }

    this.setState({ companies });
}

这是一个更复杂但更高效的版本，因为它可以异步处理多个公司/项目，而不是在继续之前等待每个调用的响应：

async componentWillMount() {
    const companies = await getCompanies();
    const nestedCompanies = await Promise.all(companies.map(async company => {
        const projects = await getProjects(company);
        const nestedProjects = await Promise.all(projects.map(async project => {
            const releases = await getReleases(project);
            return {
                ...project,
                releases
            }
        }));
        return {
            ...company,
            projects: nestedProjects
        }
    }));

    this.setState({ companies: nestedCompanies });
}

现在您的状态将如下所示：

{
    companies: [
        {
            id: 1,
            name: 'IBM',
            projects: [
                {
                    id: 1,
                    name: 'Project 101',
                    releases: [
                        {
                            name: 'Release Name'
                        },
                        // and so on
                    ]
                },
                // and so on
            ]
        },
        // and so on
    ]
}

3. 现在循环遍历公司中的数据应该相当简单。你可以这样做：

const activeProjects = this.state.companies.map(company => {
    return company.projects.map(project => {
        return project.releases.map(release => {
            return `${company.name} / ${project.name} / ${release.name}`;
        });
    }).reduce((acc, e) => acc.concat(e), []);
}).reduce((acc, e) => acc.concat(e), []);

以上代码将导致activeProjects 是一个字符串数组，每个字符串的格式为'IBM / Project 101 / Release Name'。对于这最后一步，您可以改为返回一些组件，例如：

<Box company={ company.name } project={ project.name } release={ release.name }/>,

取决于您的项目的结构。