首頁猿問 JavaScript 映射 API 響應

JavaScript 映射 API 響應

JavaScript

慕碼人8056858 2022-01-07 16:34:09

我有一個正在我的 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 循環：/

查看完整描述

2 回答

胡子哥哥

TA貢獻1825條經驗獲得超6個贊

你可以試試這個：

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,

}

})

}

反對回復 2022-01-07

Cats萌萌

TA貢獻1805條經驗獲得超9個贊

您可以修改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使用新值即可。

反對回復 2022-01-07

2 回答
0 關注
205 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

JavaScript 映射 API 響應

JavaScript 映射 API 響應

2 回答

添加回答