React+Typescript开发视频预览组件时file赋值报错如何解决

报错原因 #

你遇到的报错不是file状态赋值失败导致的，问题出在JSX渲染逻辑：你直接将File类型的对象放到了{file}的位置尝试渲染，React不支持直接将普通JS对象作为子元素渲染，因此抛出异常。你可以查看useEffect里的打印日志，实际file状态已经被正确赋值了。

修复后完整代码 #

import React, { useEffect, useRef, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';

const NewVideo: React.FC = () => {
    const { register, handleSubmit } = useForm<INewVideo>();
    // 替换any为明确的File类型，初始值设为null
    const [file, setFile] = useState<File | null>(null);
    // 存储临时生成的视频资源地址，方便后续释放内存
    const [videoUrl, setVideoUrl] = useState<string>('');
 
    const videoChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        const targetFile = event.currentTarget.files?.[0];
        if (targetFile) {
            setFile(targetFile);
            // 生成可用于video标签播放的临时资源地址
            setVideoUrl(URL.createObjectURL(targetFile));
        }
    };

    useEffect(() => {
        console.log("use effect", file);
        // 组件卸载/资源更新时释放临时地址，避免内存泄漏
        return () => {
            if (videoUrl) {
                URL.revokeObjectURL(videoUrl);
            }
        }
    }, [file, videoUrl])

    return (
        <div>
            <input
                accept="video/mp4, video/mov"
                onChange={videoChangeHandler}
                type="file"
            />
            {
                file ? (
                    <div>
                        <p>已选择视频：{file.name}</p>
                        {/* 用video标签渲染视频预览 */}
                        <video src={videoUrl} controls style={{ maxWidth: '600px' }} />
                    </div>
                ) : ("No Video")
            }
        </div>
    )
};

export default NewVideo;

补充说明 #

• 现在你选择视频后会自动渲染带控制条的预览播放器，也可以正常拿到file对象做后续的上传、裁剪等操作
• 如果你不需要预览，只想要展示选中的文件名，直接渲染{file.name}即可，不需要引入video标签

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