React数组过滤逻辑运算符问题：&&组合失效，||+&&为何有效？

核心问题分析 #

你遇到的情况是三个关键错误导致纯&&的过滤逻辑失效，而带||的逻辑只是“看起来生效”，并非真正满足你的需求：

1. userInfo是数组而非对象
   你的userInfo是包含两个用户对象的数组，直接访问userInfo._id会得到undefined，所以t.user === userInfo._id永远为false，三个&&组合的条件整体为false，自然过滤不出任何结果。

2. 类型不匹配：字符串 vs 数字
   从useParams()获取的level是字符串类型（比如URL里的1会被解析为"1"），但你的initialTasks里的level是数字类型（1），"1" === 1的结果是false，这也导致第二个条件不成立。

3. 变量拼写错误
   第一个过滤代码里的initalTasks是拼写错误，正确的变量名是initialTasks，这会直接导致代码报错。

为什么带||的代码“看起来生效”？ #

JavaScript中逻辑运算符的优先级是&&高于||，所以你的第二个过滤逻辑等价于：

t.class === tName || (t.level === level && t.user === userInfo._id)

因为userInfo._id是undefined，t.user === undefined不成立，所以后半部分永远为false，最终逻辑退化为只判断t.class === tName，所以会过滤出所有class匹配的任务——这其实不是你想要的“同时满足三个条件”，只是恰好返回了部分结果，让你误以为生效了。

正确的实现代码 #

要实现“同时匹配class、level、当前用户id”的需求，需要修正以下几点：

// 1. 先拿到当前用户的id（比如取数组中目标用户，或从Redux获取当前登录用户）
const currentUserId = userInfo[0]._id; 
// 2. 把URL参数的level转为数字，统一类型
const numericLevel = Number(level);
// 3. 正确拼写变量名，用三个&&组合所有条件
const tasksFiltered = initialTasks.filter(t => 
  t.class === tName && 
  t.level === numericLevel && 
  t.user === currentUserId
);

额外提示 #

如果你的userInfo是从Redux获取的当前用户信息，建议直接存储单个用户对象而非数组，避免类似的引用错误；另外，从URL参数获取的数值类型参数（如level、pageNumber）都建议显式转换为数字类型，避免类型比较的问题。

内容的提问来源于stack exchange，提问作者FabioNevez