TypeScript新手求助：React文件上传更新State遇类型错误

错误原因分析 #

1. 初始化useState([])时，TypeScript无法推断数组的具体元素类型，默认将其推断为never[]，导致后续状态更新时类型不匹配。
2. chosenFiles是File类型的数组，但你直接将它作为单个元素添加到prev数组中，会造成数组嵌套，同时类型不符合预期。
3. 状态更新函数里判断prev是否存在是多余的——useState的初始值是数组，prev永远是数组类型，不会是假值。

修复步骤 #

• 给useState指定明确类型：声明状态为File[]类型，让TypeScript明确数组元素的类型。
• 优化文件数组获取方式：用Array.from(e.target.files)替代Array.prototype.slice.call，更贴合TypeScript写法，避免类型歧义。
• 修正状态更新逻辑：直接展开prev和chosenFiles的元素，避免数组嵌套，保证类型一致。

修正后的完整代码 #

import React, { useState, ChangeEvent } from "react";

export default function Home() {
  // 明确指定状态类型为File[]，初始值为空数组
  const [userImg, setUserImg] = useState<File[]>([]);

  const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    // 处理e.target.files为null的边界情况，转为File数组
    const chosenFiles = Array.from(e.target.files || []);
    // 合并原数组与新选择的文件数组
    setUserImg(prev => [...prev, ...chosenFiles]);
  };

  return (
    <div>
      <h3>Welcome to home page of stunning image app</h3>
      <p>Add an amazing photo from your device to your gallery</p>
      <input type="file" accept="image/*" multiple onChange={changeHandler} />
    </div>
  );
}

额外说明 #

• e.target.files可能为null，添加|| []处理边界情况，避免运行时报错。
• 明确类型后，TypeScript会在你操作userImg数组时提供类型提示，比如访问文件的name、size等属性时，会有正确的类型校验。

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