JavaScript 映射 API 响应

Question

我有一个正在我的 React 应用程序的上下文组件中创建的对象。

它看起来像这样：

constructor(props) {

    super(props);

    this.state = {

      roles: [

        { role_type : { display : Manager }},

        { role_type : { display : Accounting}},

        { role_type : { display : Developer }},

      ],

   },

}

然后我进行一个 API 调用，它返回一个 role_type 对象数组。返回看起来像这样：

[

  {

    "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"

  },

]

如果我的 API 调用成功，我想更新每个显示与 API 响应显示匹配的角色类型对象。

我有一个可行的解决方案：

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)

      }

    }

  }

}

我的队友今天问我是否可以在没有 for 循环的情况下做到这一点。我不太确定如何更改我的代码以摆脱 for 循环：/

Answer 1

你可以试试这个：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

您可以修改state? 如果是这种情况，您可以将 的数据类型修改roles为一个object of objects（这可以使用code角色的作为对象的键），而不是一个array of objects。这将帮助您访问和检查每个角色的特定key。这样，您应该能够只运行一个循环来检查您是否role存在新的循环，state如果是则更新它。代码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;};这将返回您的突变，state您只需要setState使用新值即可。