React中如何动态访问ref的current属性 解决多文件上传取值报错问题

• 核心错误是函数组件误用了类组件的render语法，导致文件输入框没有正常渲染，所有ref的current值始终为初始值null，访问ref.current.files自然触发空值报错。
• 没有做空值兼容逻辑，即使用户正常渲染了组件，如果某个文件输入框没有选择文件，ref.current.files[0]也会是undefined，后续访问name属性同样会报错。

以下是完整可运行的修正后代码：

import { useRef } from 'react';

export default function MyComponent(props) {
  const file1 = useRef(null);
  const file2 = useRef(null);
  const file3 = useRef(null);
  const file4 = useRef(null);

  const fileRefs = [file1, file2, file3, file4];

  function onSubmit() {
    const files = fileRefs.map((ref) => {
      // 可选链做多层空值校验，兼容DOM未加载、未选文件的场景
      if (!ref.current?.files?.length) {
        // 若为必填项，可在此处添加用户提示，中断提交逻辑
        return null;
      }
      const selectFile = ref.current.files[0];
      return {
        fileName: selectFile.name,
        file: selectFile
      };
    }).filter(Boolean); // 过滤掉未选择文件的空项

    // 此处写后续提交逻辑
    console.log(files);
  }

  // 函数组件直接返回JSX，不需要render方法
  return (
    <div className="form">
      <label>File 1 </label>
      <input type="file" ref={file1} />

      <label>File 2 </label>
      <input type="file" ref={file2} />

      <label>File 3 </label>
      <input type="file" ref={file3} />

      <label>File 4 </label>
      <input type="file" ref={file4} />

      <button onClick={onSubmit}>Submit</button>
    </div>
  );
}

核心修改说明 #

• 移除错误的render方法，改为函数组件标准的直接返回JSX，保证DOM正常渲染，ref可以正确绑定到文件输入框元素。
• 增加多层空值校验，避免空值报错。如果项目环境不支持可选链语法，可以替换为普通条件判断：

  if (ref.current && ref.current.files && ref.current.files.length > 0) {
    // 处理文件逻辑
  }
  

• 优化数组遍历逻辑，用map+filter直接生成有效文件数组，代码更简洁易读。

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