如果在下一个JS中，如何在内联内线循环中线

Question

我想在bedsassign.map内停止循环，如果row.id.id不等于u.tenant_id，但是放置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.id不匹配的项目，

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

如果您想要打破循环，您可以尝试使用> 找到的 返回 for map

{
  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等。如果遇到希望循环断裂的场景，则应将传统用于循环。

Answer 3

使用filter而不是bedsassign的地图：

{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
}
}
                 )
               )}