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

Question

I have a page that displays multiple boxes and each box belongs to a specific company. Each company has multiple projects and each project has multiple releases.

Box 1: Company Name / Project Name / Release Name

Box 2: Company Name / Project Name / Release Name

I have a state defined as such:

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

And here, I am fetching all the data from the database:

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
              });
            }
          })
        })
      })
    });
  })
}

which comes back with the following data:

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

I am getting 2 companies, 1 project, and 3 releases.

If I wanted to store each of my company, project, and release into my activeProjects array, how would I achieve the following?

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

Can someone please help me out?

I want my end result to be someting like this:

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

I would recommend structuring your data in the desired format from the beginning. What I mean by this is rather than splitting your companies, projects, and releases into separate arrays in your state, just keep them nested from the start.

(Also from what I can tell from your code, you are overwriting the projects and releases each time so you are only left with projects for the last company and releases for the last project.)

1. First structure state like this:

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

2. Then rework your componentWillMount method to be something like this (also I would recommend using async / await instead of callbacks for ease of readability).

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 });
}

Here is a version that is a bit more complicated but more efficient because it can work on multiple companies/projects asynchronously rather than waiting for responses for each call before moving on:

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 });
}

Now your state will look like this:

{
    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. Now looping through the data in companies should be fairly simple. You can do something like this:

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), []);

The above code will result in activeProjects being an array of strings, each of which have the format 'IBM / Project 101 / Release Name' . For this last step you could instead return some component like:

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

depending on how your project is structured.