React.js中如何将变量传递给组件 解决视频预览fi变量未定义问题

• 你在onInputValue函数内部用var声明的fi是局部变量，作用域仅局限于该函数内部，组件的return模板部分无法访问到这个变量，因此触发no-undef报错。
• 你已经定义了file状态用来存储文件相关数据，直接把生成的预览地址存入这个状态即可跨作用域使用。

import {useState, useEffect} from 'react';
import ReactPlayer from 'react-player';

function Video(props) {
    // 用来存储视频预览地址
    const [file, setFile] = useState(null);

    const onInputValue = (e) => {
      // 生成临时预览地址并存入state
      const videoUrl = URL.createObjectURL(e.target.files[0]);
      setFile(videoUrl);
    };

    // 可选优化：组件卸载时释放临时URL占用的内存
    useEffect(() => {
      return () => {
        if (file) URL.revokeObjectURL(file);
      };
    }, [file]);

    return (
        <div>
            <form method="post" action="#" id="#">
                <input type="file" accept="video/*" onChange={onInputValue}/>
                <button>Upload</button>
            </form>

            {/* 直接传入存在state里的视频地址 */}
            <ReactPlayer
              controls
              url={file} 
              id="videoz" 
            />
        </div>
    );
}

export default Video;

• 给file输入框加上accept="video/*"属性，限制用户只能选择视频文件，避免生成非视频的预览地址导致播放器报错。
• 增加的useEffect清理逻辑，会在组件卸载或者视频地址更新时，销毁之前创建的临时对象URL，避免内存泄漏。

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