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);
相关推荐
光影少年17 分钟前
react的 useState 原理、批量更新机制
前端·react.js·掘金·金石计划
Swift社区31 分钟前
Flutter / React / ArkUI:在鸿蒙 PC 上怎么选?
flutter·react.js·harmonyos
学习论之费曼学习法34 分钟前
ReAct框架深度解析:让Agent会思考再行动
前端·react.js·前端框架
openKaka_1 小时前
completeWork:真实 DOM 是在哪里被创建的
前端·javascript·react.js
Highcharts.js2 小时前
Highcharts React v5版本迁移的核心注意事项和步骤清单
开发语言·javascript·react.js·前端框架·highcharts
sheeta19982 小时前
TypeScript 学习笔记
笔记·学习·typescript
淑子啦2 小时前
TS 和组件绑定深耕(泛型表格)
前端·javascript·react.js
晓杰'12 小时前
从0到1实现 Balatro 游戏后端(2):NestJS框架搭建与项目结构设计
后端·websocket·typescript·node.js·游戏开发·项目实战·nestjs
诚实可靠王大锤13 小时前
React Native 输入框与按钮焦点冲突解决方案(rn版本0.70.3)
前端·javascript·react native·react.js
openKaka_18 小时前
reconcileChildren 深入:React 如何根据 ReactElement 构建子 Fiber
前端·javascript·react.js