React条件渲染中逻辑运算符使用不生效问题求助

你的代码问题出在逻辑运算符的优先级上：&&的优先级高于||，所以原代码会被JavaScript解析成：

{channel.length > 0 || ((sport.length > 0 && ref.current == true) && <Error content={"Επιλέξτε φίλτρα"} />)}

这意味着只要channel.length > 0为真，整个表达式就会返回true，而不会渲染Error组件；只有当channel.length > 0为假，同时sport.length > 0和ref.current都为真时，才会渲染组件，这显然和你预期的逻辑不符。

修复方案 #

根据你的错误提示“Επιλέξτε φίλτρα”（选择过滤器），推测你想要的逻辑应该是：当channel和sport都未选择（长度为0），且ref.current为true时，显示错误提示。如果是这样，代码应该写成：

{channel.length === 0 && sport.length === 0 && ref.current && <Error content={"Επιλέξτε φίλτρα"} />}

如果你的实际需求是当channel或sport有选择，且ref.current为true时显示错误，那需要给||部分加上括号，明确优先级：

{(channel.length > 0 || sport.length > 0) && ref.current && <Error content={"Επιλέξτε φίλτρα"} />}

补充说明 #

• 逻辑判断里ref.current == true可以简化成ref.current，因为本身就是布尔值
• React中条件渲染时，只有当整个表达式最终返回组件（或null/undefined）时才会正确渲染，注意避免返回布尔值（比如true/false会被React忽略）

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