[英]How to fix this ESlint (no-param-reassign) error in my Filter
我正在嘗試僅查找具有特定服務的用戶。 每個用戶都有一系列服務。 我需要找到的匹配項如下:
userService.name === service.name && !user.disabled
下面的代碼有效,但是在處理參數重新分配時出現ESlint錯誤。
export const matchUserWithService = (user, userService, service) => {
if (userService.name === service.name && !user.disabled) {
user.isMatched = true;
userService.rights = service.rights;
}
return userService;
};
export const renderServiceAdmins = (users, selectedService) => {
const usersWithService = users.filter((user) => {
user.services.map(usrSrv => matchUserWithService(user, usrSrv, selectedService));
if (user.isMatched) return user;
return false;
});
return usersWithService.map(user => user.services.map(service => service.rights.map((right) => {
if (
service.name === selectedService.name &&
lowCase(right.name) === 'admin' &&
!right.disabled
) {
return (
<li key={user.email + randId()}>
{ user.name } | <span className="info_blue">{ user.email }</span>
</li>
);
}
return null;
})));
};
可以使用.find
重構.find
嗎?
我建議重新組織代碼,因為現在它依賴於.map
調用中的突變,這可能很難推理。 我無法檢查我建議的代碼是否確實有效,但是我認為它表達了您嘗試做的事情的意圖。
編輯 。 說明:簡而言之,我們有一個用戶列表,其中只有一些是相關的。 這告訴我們,我們可能希望代碼以users.filter
。 通常的想法是過濾出具有所選服務管理員權限的用戶。 因此,我試圖將該邏輯提取到一個函數( userHasAdminRightsForService
)中,該函數實現為一個函數,該函數返回將要用於過濾用戶的函數。 由於這種設計,我們得到的代碼讀起來更像普通英語: users.filter(userHasAdminRightsForService(selectedService))
而不是users.filter(user => userHasAdminRightsForService(user, selectedService))
。
Array.prototype.some
用於檢查數組是否具有至少一個滿足某些條件的元素。 因此,像userService.rights.some(right => lowCase(right.name) === 'admin')
表示我們檢查userService.rights
中的至少一項權利是否滿足其應具有名稱的條件“管理員”。
// given a serviceToCheckFor, return a function that checks if
// one specific user has any userService, with admin rights, that match the name of serviceToCheckFor
export const userHasAdminRightsForService = serviceToCheckFor = user => {
return user.services.some(userService =>
// name check
userService.name === serviceToCheckFor.name &&
// check if there exists a non-disabled admin right
userService.rights
.filter(right => !right.disabled)
.some(right => lowCase(right.name) === 'admin')
);
};
export const renderServiceAdmins = (users, selectedService) => {
const adminsForSelectedService = users
.filter(user => !user.disabled)
.filter(userHasAdminRightsForService(selectedService))
return adminsForSelectedService.map( admin =>
(<li key={admin.email + randId()}>
{ admin.name } | <span className="info_blue">{ admin.email }</span>
</li>)
);
};
也許您可以在不禁用規則的情況下進行重寫?
export const renderServiceAdmins = (users, selectedService) => {
var admins = users.reduce((serviceAdmins, user) => {
user.services
.forEach((service) =>{
if(service.name === selectedService.name) {
service.rights
.forEach((right)=> {
if( lowCase(right.name) === 'admin' && !right.disabled) {
serviceAdmins.concat[{
name: user.name,
name: user.email
}]
}
})
}
});
return serviceAdmins;
}, []);
return admins.map(admin=> {
return (
<li key={admin.email + randId()}>
{ admin.name } | <span className="info_blue">{ admin.email }</span>
</li>
);
});
};
我們最終以這種方式解決了問題,它更加簡潔,代碼也更少(刪除了2個功能)! 缺少的部分是鏈接過濾器,然后使用.find
export const renderServiceAdmins = (users, theService) =>
users
.filter(user => !user.disabled)
.filter(user => user.services.find(
usrSrv => (
usrSrv.name === theService.name &&
usrSrv.rights.find(r => r.name.toLowerCase() === 'admin' && !r.disabled)
)
))
.map(user => (
<li key={user.email + randId()}>
{ user.name } | <span className="info_blue">{ user.email }</span>
</li>
));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.