TS-React:useRef 使用

不能给 useRef 的 current 属性赋值,提示一下错误信息:

Cannot assign to 'current' because it is a read-only property.(不能给current属性复制,因为它是一个只读属性。)

代码如下所示:

typescript 复制代码
let cameraMediaStream = useRef<MediaStream>(null);

/**
 * 打开摄像头
 **/
const openCamera = async (cameraId = curCameraId) => {
    try {
      // 关闭已打开的摄像头
      if (cameraMediaStream) await closeCamera();
      // Cannot assign to 'current' because it is a read-only property.
      cameraMediaStream.current = await ImageCapture.openCamera({ cameraId, video: videoRef.current, width, height });
    }
    catch (err: any) {
    	// 错误信息提示...
    }
}

解决方案:将 current 属性变为非只读属性,useRef 的泛型参数中增加【| null】即可把 current 属性变为非只读属性。

typescript 复制代码
let cameraMediaStream = useRef<MediaStream | null>(null);
相关推荐
一个处女座的程序猿O(∩_∩)O38 分钟前
现代前端开发的三大支柱:TypeScript、ESLint、Prettier 深度解析与完美协作
javascript·typescript
web小白成长日记2 小时前
深入理解 React 中的 Props:组件通信的桥梁
前端·javascript·react.js
老前端的功夫4 小时前
TypeScript 全局类型声明:declare关键字的深度解析与实战
linux·前端·javascript·ubuntu·typescript·前端框架
EndingCoder4 小时前
TypeScript 入门:理解其本质与价值
前端·javascript·ubuntu·typescript·node.js
烟袅5 小时前
React 表单的控制欲:什么时候我们真得控制它了,什么时候该放养了?
前端·react.js
鱼鱼块9 小时前
彻底搞懂 React useRef:从自动聚焦到非受控表单的完整指南
前端·react.js·面试
韭菜炒大葱9 小时前
React Hooks :useRef、useState 与受控/非受控组件全解析
前端·react.js·前端框架
MoonPointer-Byte12 小时前
MoonReader:基于 SpringBoot 3.4 & React 的沉浸式协作阅读平台
spring boot·后端·react.js
怕浪猫20 小时前
第一章 JSX 增强特性与函数组件入门
前端·javascript·react.js
ohyeah1 天前
深入理解 React 中的 useRef:不只是获取 DOM 元素
前端·react.js