作為我正在使用 React 開發的專案的一部分,我試圖通過參考兩個物件串列的 id 來進行模式匹配并回傳一個布林值,然后將其分配給所述 Radio,從而呈現單選按鈕的狀態按鈕。我認為這里的限制是我的 JavaScript 知識,據我所知,邏輯如下。對于背景關系,被比較的串列是用戶可以擁有的所有可能應用程式的串列,然后是用戶確實擁有的應用程式的串列。我的目標是根據匹配的狀態呈現單選按鈕的狀態。以下是執行的一些代碼片段。
我的組件的 JSX 被渲染
{applications.map((app: Application) => (
<FormControlLabel key={app.id} control={
<Radio
checked={userHasApplicationCheck(app.id)}
onClick={handleRadioChange}
value="a"
name="radio-buttons"
inputProps={{ 'aria-label': app.id }}
/>} label={app.id} />
))}
它在評估是否應選中單選按鈕時參考的 JavaScript 函式。
注意:props 是一個User 物件,它有一個被擁有的應用程式的串列被參考props.applications
function userHasApplicationCheck(id: string) {
props.applications.forEach((app: Application) => {
if (app.id === id) {
console.log(`User has this app: ${app.id}`);
return true
}
else { return false }
})
return false
}
我遇到的問題是,盡管我的控制臺日志陳述句在終端中正確確認了狀態,但我的任何單選按鈕都沒有被渲染。很可能我剛剛在語法上做了一些愚蠢的事情,但我看不到它。
解決方案
感謝@Rithick 的評論,我現在知道在 For Each 回圈內回傳一個布林值不會退出回圈。因此,我修改了以下方法:
function userHasApplicationCheck(id: string) {
let found = false;
props.user.applications.forEach((app: Application) => {
if (app.id == id){
found=true;
}
})
return found;
}
此后對此進行了測驗并可以確認它正在作業。
uj5u.com熱心網友回復:
forEach 方法中的 Return 陳述句不會終止該函式,因為這里我們將每個元素傳遞給回呼函式。因此該回呼函式回傳的不是 forEach 方法。因此它繼續為陣列中的其余元素呼叫該回呼函式。這就是為什么在完成 forEach 方法后您的函式會轉到最后一條陳述句并回傳 false。解決方案:當你想在中間終止一個回圈時,而不是 forEach 方法更喜歡使用常規的 for..of 和 for..in 回圈。
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/453268.html
標籤:javascript 反应
