JavaScript 映射 API 响应

Question

I have an object which is being creating in the Context Component of my React application.

It looks something like this:

constructor(props) {
    super(props);
    this.state = {
      roles: [
        { role_type : { display : Manager }},
        { role_type : { display : Accounting}},
        { role_type : { display : Developer }},
      ],
   },
}

I am then making an API call which returns an array of role_type objects. The return looks like this:

[
  {
    "uuid": "a49-a2a5-fcce",
    "link": "organizations/roletypes/a49-a2a5-fcce/",
    "code": "MANG",
    "display": "MANAGER",
    "description": "MANAGER"
  },
  {
    "uuid": "681fbe",
    "link": "organizations/roletypes/681fbe/",
    "code": "SUPSPEC",
    "display": "Support Specialist",
    "description": "Support Specialist"
  },
  {
    "uuid": "0331ddccf",
    "link": "organizations/roletypes/0331ddccf/",
    "code": "PROJMANG",
    "display": "Project Manager",
    "description": "Project Manager"
  },
]

If my API call is successful I want to update each of the role_type objects whose display matches a display of the API response.

I have a working solution:

updateRoleTypes = () => {
  for(roleType in this.state.roles) {
    for(responseType of APIresponse) {
      if(responseType.display === this.state.roles[roleType].role_type.display) {
         this.setState( this.state.roles[roleType] : responseType)
      }
    }
  }
}

My teammate asked me today if I can do this without the for loop. I'm not really sure how to change my code to get rid of the for loop though:/

Answer 1

You can try this:

updateRoleTypes = () => {
  this.setState(prevState => {
    const names = prevState.roles.map(role => role.role_type.display.toLowerCase())
    const updated = APIresponse.filter(r => names.includes(r.display.toLowerCase()))
    return {      
      roles: [
        ...prevState.roles.filter(row => !APIresponse.find(responseRow => responseRow.display.toLowerCase() === row.role_type.display.toLowerCase())),
        ...updated,
      ],
    }
  })
}

Answer 2

You are able to modify the state ? If this is the case you can modify the data type of the roles to be an object of objects (This could use the code of the role as the key of the object), instead an array of objects .This will help you to access and check each role with certain key .

This way you should be able to use run just one loop to check if the new role exists in your state and update it if is the case.

Code

const state = {
  roles: {
    "MANG": { role_type: { display: "Manager" } },
    "ACCT": { role_type: { display: "Accounting" } },
    "DEV": { role_type: { display: "Developer" } }
  }
};

const response = [
  {
    uuid: "a49-a2a5-fcce",
    link: "organizations/roletypes/a49-a2a5-fcce/",
    code: "MANG",
    display: "MANAGER",
    description: "MANAGER"
  },
  {
    uuid: "681fbe",
    link: "organizations/roletypes/681fbe/",
    code: "SUPSPEC",
    display: "Support Specialist",
    description: "Support Specialist"
  },
  {
    uuid: "0331ddccf",
    link: "organizations/roletypes/0331ddccf/",
    code: "PROJMANG",
    display: "Project Manager",
    description: "Project Manager"
  }
];

const updateRoleTypes = newRoles => {
  let _roles = state.roles;
  newRoles.forEach(nR => {
    if (_roles[nR.code]) {
      _roles[nR.code].role_type = nR;
    }
  });

  return _roles;
};

This will return your mutated state you just have to setState with the new value.