映射API响应的JavaScript

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

它看起来像这样：

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

[
  {
    "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调用，该调用返回一个角色类型对象数组。返回结果如下所示：

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

[
  {
    "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响应显示匹配的每个role_类型对象

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

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循环：//

您可以修改

状态吗？如果是这种情况，您可以将
角色
的数据类型修改为对象的
对象
（这可以使用角色的
代码
作为对象的键），而不是对象的
数组
。这将帮助您使用特定的
键访问和检查每个角色

通过这种方式，您应该能够使用run just one loop检查新的
角色
是否存在于您的
状态
中，如果存在，则进行更新

代码


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

这将返回变异的
状态
您只需使用新值设置状态即可。
您可以尝试以下操作：

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,
      ],
    }
  })
}

你知道数组映射函数的作用吗？你试过了吗？除了@ AZIAN注释之外，你还应该考虑立即从整个状态中更新整个数组。在循环中执行会导致无效组件的多次重新渲染我确实查看了map函数，如果我只需要在单个数组上循环，它似乎可以工作。我不知道如何同时映射两个阵列。这看起来不是一个可行的解决方案。该行
this.setState（roles[roleType]：responseType）
不应工作<代码>角色
未定义，如果
角色
应为
此.state.roles
，则应使用不同的数据类型替换它。是沙箱中的一个工作示例。