修复您的 Ref

您的 ref 存在多个问题：

• 您需要通过在 useRef 上设置泛型（如 useRef<HTMLInputElement> ）来声明您的 ref 的类型。
• React 期望 DOM 元素 ref 的初始值为 null ，而不是 undefined 。
• 您混淆了 ref 对象语法 和 回调 ref 语法 。使用 ref 对象，您只需将整个对象传递给 DOM 元素，如 ref={inputUpdateAvatarPhoto
• 为了访问 ref 对象的当前值，您需要查看 .current 属性

此代码应该可以工作，但下一个代码更好

const ProfileLayoutV1: React.FC = ({ children }) => {
  const inputUpdateAvatarPhoto = useRef<HTMLInputElement>(null);

  const handleImageChange = async (e: React.FormEvent<HTMLInputElement>) => {
    const files = inputUpdateAvatarPhoto.current?.files;
    // make sure that it's not null or undefined
    if (files) {
      const formData = new FormData();
      formData.append("avatar", files[0]);
    }
    // need to set something
  };

  return (
    <input
      id="avatar"
      accept="image/*"
      type="file"
      ref={inputUpdateAvatarPhoto}
      onInput={(e) => {
        handleImageChange(e);
      }}
    />
  );
};

您不需要 Ref

看看您的 handleImageChange 函数如何获取事件 e ，但没有使用它？ inputUpdateAvatarPhoto.current 与 e.currentTarget 相同！

实际上，我们甚至不需要 input 上的处理程序，因为您可以为整个表单获取 FormData 对象！查看 MDN 文档中的此示例： 使用 FormData 对象发送文件 。

我们希望在 input 上设置 name 属性，因为它用于确定其在 FormData 对象中的键。

const ProfileLayoutV2: React.FC = ({ children }) => {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // prevent the page from redirecting ot reloading
    e.preventDefault();
    // get the `FormData` for the whole form
    const formData = new FormData(e.currentTarget);
    // logs a `File` object
    console.log(formData.get("avatar"));
  };

  return (
    <form name="profile_form" onSubmit={handleSubmit}>
      <input
        id="avatar"
        name="avatar"
        accept="image/*"
        type="file"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

请注意，如果您想直接使用 File ，则需要检查它是否已定义。

const avatar = formData.get("avatar"); // type is `string | File | null`
if ( avatar instanceof File ) {
  console.log("we have a file", avatar); // type is now just `File`
}