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);
相关推荐
浮生望10 小时前
React + TypeScript 项目架构实战:Model层与Api层的分离设计
typescript
用户9385156350715 小时前
Type vs Interface:读完这篇就没有面试官能难倒你了
前端·面试·typescript
半个落月17 小时前
React useRef 详解:DOM 引用、持久化值与 Worker 实例
前端·react.js
烬羽18 小时前
navigator.gpu 存在就够了?WebGPU 检测的两层陷阱
typescript·浏览器·全栈
触底反弹18 小时前
🚀 浏览器里跑 1.5B 参数大模型?我用 WebGPU + DeepSeek 做到了
人工智能·面试·typescript
光影少年19 小时前
React Native网络、存储与原生能力
前端·react native·react.js
To_OC19 小时前
绕开层层 props 搬运:我把 useContext 和自定义 Hook 跑通了
前端·react.js·前端框架
退休倒计时1 天前
【每日一题】LeetCode 20. 有效的括号 TypeScript
算法·leetcode·职场和发展·typescript
张元清1 天前
React useMount Hook:只在挂载时执行一次的正确姿势 (2026)
javascript·react.js
晓说前端1 天前
TypeScript 核心语法应用 —— Vue 3 中的使用(上)
前端·typescript