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);
相关推荐
折七7 小时前
NestJS 用了两年,我换了这个
typescript·node.js·nestjs
不会敲代码17 小时前
从原子CSS到TailwindCSS:现代前端样式解决方案全解析
前端·css·react.js
Wect7 小时前
LeetCode 102. 二叉树的层序遍历:图文拆解+代码详解
前端·算法·typescript
冴羽8 小时前
2026 年 JavaScript 框架 3 大趋势
前端·javascript·react.js
www_stdio11 小时前
全栈项目第五天:构建现代企业级 React 应用:从工程化到移动端实战的全链路指南
前端·react.js·typescript
We་ct14 小时前
LeetCode 637. 二叉树的层平均值:BFS层序遍历实战解析
前端·数据结构·算法·leetcode·typescript·宽度优先
ssshooter14 小时前
看完就懂 useLayoutEffect
前端·react.js·面试
We་ct14 小时前
LeetCode 199. 二叉树的右视图:层序遍历解题详解
前端·算法·leetcode·typescript·广度优先
www_stdio15 小时前
项目基础准备之Zustand:轻量级 React 状态管理的优雅之选
前端·react.js·typescript
加个鸡腿儿15 小时前
Nuxt SSR 水合错误处理实践:响应式布局的正确姿势
前端·typescript·nuxt.js