ReactJS文件验证中else if条件判断不符合预期问题咨询

逻辑错误原因 #

你遇到的问题本质是逻辑命题否定转换时的运算符误用，符合德摩根定律的适用规则：
原命题 A || B 的否定形式应为 !A && !B，而非你写的 !A || !B

第一段代码运行正常的原因 #

判断条件 file.type === "image/png" || file.type === "image/jpeg" 的逻辑完全匹配预期：

• 上传的文件是png或jpeg任意一种格式时，条件成立，打印1st
• 不符合以上两种格式的文件才会进入else分支打印3rd

第二段代码不符合预期的原因 #

你修改后的条件 file.type !== "image/png" || file.type !== "image/jpeg" 是恒成立的真命题，所以永远会走打印1st的分支，永远不会进入else：
我们用实际场景验证：

• 上传png格式：file.type !== "image/png"为假，file.type !== "image/jpeg"为真，假 || 真 = 真，条件成立
• 上传jpeg格式：file.type !== "image/png"为真，file.type !== "image/jpeg"为假，真 || 假 = 真，条件成立
• 上传其他格式：两个判断都为真，真 || 真 = 真，条件依然成立

如果你要实现「非png/jpeg格式走1st分支，png/jpeg走3rd分支」的需求，只需要把||替换为&&即可，修改后的代码如下：

const fileChange = e => {
    const file = e.target.files[0];

    if(file === undefined) {
        console.log("undefined")
    } else if(file.type !== "image/png" && file.type !== "image/jpeg") {
        console.log("1st")
    } else {
        console.log("3rd")
    }
}

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