'||‘和'&&’非混合运算符的意外组合

Question

我有下面的钩子，我们用它来绑定到通道。

import { useEffect, useState } from "react";
import { Channel, PresenceChannel } from "pusher-js";
import PrivateChannel from 'pusher-js/types/src/core/channels/private_channel';
import { usePusher } from "./usePusher";

export type ChannelType = PrivateChannel | PresenceChannel

function _useChannel<T extends ChannelType>(channelName: string) {
    const pusher = usePusher()
    const [channel, setChannel] = useState<T>();

    useEffect(() => {
        const pusherChannel = pusher.subscribe(channelName) as T;
        setChannel(pusherChannel);

        return () => pusher?.unsubscribe(channelName);
    }, [channelName, pusher]);

    return channel;
}

当我打开控制台时，我看到这条消息：Unexpected mix of '||' and '&&' no-mixed-operators

这一切为什么要发生？

Answer 1

正如@Drew Reese所说，你在某个地方有一个混合了&&和||的复杂逻辑表达式，并且你已经配置了ESLint来在发生这种情况时警告你。你必须找出这是在哪里发生的，并添加必要的括号来澄清你的意图。

来自ESLint docs

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = a && b ? c : d;      /*BAD: Unexpected mix of '&&' and '?:'.*/
var foo = (a && b) ? c : d;    /*GOOD*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

如果您不确定布尔运算符的正确优先级应该是什么，可以认为&&等同于multiplication，||等同于addition，因此&&优先于||

例如：

a && b || c || d 
<=> a*b + c + d 
<=> (a && b) || c || d