为何已判断e.target.files为真仍需校验e.target.files[0]？

先看你贴的这段代码：

const onImageChange = (e) => {
        if (e.target.files && e.target.files[0]) {
            let img = e.target.files[0];
            e.target.name === "profileImage" ? setprofileImage(img) : setcoverImage(img);
        }
};

你疑惑的点在于：既然已经判断了e.target.files为真，为啥还要校验e.target.files[0]？原因很简单：

• e.target.files是一个FileList对象，它属于类数组结构。当用户打开文件选择弹窗但最终没选任何文件（直接点击取消），这个FileList对象依然存在，但它的长度是0，也就是里面没有任何文件项。
• 只判断e.target.files只能确保这个对象不是null或undefined，但没法确认里面有没有实际选中的文件。如果不检查files[0]，后续直接取files[0]就会拿到undefined，赋值给img后执行setprofileImage或setcoverImage时可能引发错误——比如组件期望接收一个File对象，结果拿到undefined导致渲染异常。

举个实际场景：用户点击上传按钮，弹出文件选择框，临时改变主意又点了取消，这时候e.target.files是存在的，但files[0]就是undefined。如果没这个校验，代码就会把undefined传给状态函数，很可能触发意料之外的问题。

所以这两步校验是互补的：第一步确保FileList对象存在，第二步确保确实有选中的文件，这样后续的处理逻辑才安全。

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