如果在下一个 js 中，如何在内联中打破循环

Question

如果 row.id 不等于 u.tenant_id，我想停止 bedsAssign.map 内的循环，但放置 break; 不起作用。

{tenants.map((row) =>
                 bedsAssign.map(
                   (u) =>
                     row.id !== u.tenant_id && (
                       <MenuItem key={row.id} value={row.id}>
                         {row.fullName}
                       </MenuItem>
                        break; --> not working
                     )
                 )
               )}

Answer 1

您可以在 map 之前添加 filter 以删除所有 bedsAssign 与当前 row.id

不匹配的项目

{
  tenants.map((row) =>
    bedsAssign
      .filter((u) => row.id !== u.tenant_id)
      .map((u) => (
        <MenuItem key={row.id} value={row.id}>
          {row.fullName}
        </MenuItem>
      ))
  )
}

如果你想打破循环，你可以尝试使用 some 或 find 并为 map

使用适当的 return

{
  tenants.map((row) => {
    const isAssigned = bedsAssign.some((u) => row.id !== u.tenant_id)
        return isAssigned ? (<MenuItem key={row.id} value={row.id}>
          {row.fullName}
        </MenuItem>) : null    
  })
}

Answer 2

您不能中断任何数组方法，例如 forEach、filter、map 等。如果您遇到需要中断循环的情况，那么您应该使用传统的 for 循环。

Answer 3

使用 filter 而不是 map 进行床位分配：


{tenants.map((row) =>
                 bedsAssign.filter(
                   (u) =>
                     row.id !== u.tenant_id && (
                       <MenuItem key={row.id} value={row.id}>
                         {row.fullName}
                       </MenuItem>
                     )
                 )
               )}

过滤器将只填写满足您所需条件的项目。

编辑：我注意到你想在满足条件后中断，这在这种情况下有效：

{tenants.map((row) =>
                 for(let i of bedsAssign){
                     if(row.id !== i.tenant_id && (
                       <MenuItem key={row.id} value={row.id}>
                         {row.fullName}
                       </MenuItem>
                     )){
                         break
}
}
                 )
               )}

如果在下一个 js 中，如何在内联中打破循环

How to break a loop inside inline if in next js

javascript

array-map

reactjs