如何校验数组元素的指定属性值是否匹配另一数组的字符串值（附多文件上传案例）

问题原因 #

你原有代码的核心问题是遍历文件时反复覆盖isInvalidImageFormat状态，最终状态仅由最后一个遍历到的文件决定，前面文件的校验结果会被直接覆盖，因此多文件上传时逻辑失效。

修正方案 #

我们可以先将target.files类数组转为普通数组，再通过数组方法一次性判断所有文件的格式合法性，只要存在任意一个不符合要求的文件，就标记为格式非法：

const IMAGE_TYPES = ['image/png', 'image/jpeg'];

const handleClick = ({target}) => {
  // 将FileList类数组转为普通数组
  const fileList = Array.from(target.files);
  // 判断是否存在非法格式的文件，只要有一个不符合就会返回true
  const hasInvalidFile = fileList.some(file => !IMAGE_TYPES.includes(file.type));
  // 一次性更新状态，避免多次覆盖
  setIsInvalidImageFormat(hasInvalidFile);

  // 后续上传逻辑直接判断：!isInvalidImageFormat 时才允许上传即可
};

<input
   id='icon-button-photo'
   multiple
   onChange={handleClick}
   type='file'
   accept=".png,.jpeg,.jpg" // 补充：可加上accept属性从系统选择层先过滤可选文件，双重校验体验更优
/>

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