通过迭代列表动态呈现单选按钮的已检查状态-未正确呈现已检查状态

Question

作为我使用React开发的项目的一部分，我试图通过引用两个对象列表的id来呈现单选按钮的状态，以进行模式匹配并返回一个布尔值，然后将其分配给所述单选按钮。我认为这里的限制是我的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是一个用户对象，它有一个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;
}

已经测试过了，可以确认它是有效的。

Answer 1

forEach方法内部的Return语句不会终止该函数，因为这里我们将每个元素传递给回调函数。因此，回调函数不会返回forEach方法。因此，它继续为数组中的其余元素调用回调函数。这就是为什么你的函数在完成forEach方法后会转到最后一个语句&返回false解决方案：不使用forEach方法，而是使用正则for。。的；对于在循环中，当您想在中间终止循环时。