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);
相关推荐
FrontAI3 小时前
Next.js从入门到实战保姆级教程:环境配置与项目初始化
react.js·typescript·学习方法
前端那点事5 小时前
TypeScript VS JavaScript 深度对比,新手必看,老手避坑
typescript
用户3153247795455 小时前
React19项目中 FormEdit / FormEditModal 组件封装设计说明
前端·react.js
前端那点事5 小时前
TS核心语法:解构与展开(实战详解,新手零踩坑)
typescript
LcGero7 小时前
TypeScript 快速上手:泛型与工具类型
typescript·cocos creator·游戏开发
Ruihong7 小时前
Vue3 转 React:组件透传 Attributes 与 useAttrs 使用详解|VuReact 实战
vue.js·react.js
程序员buddha9 小时前
TypeScript详细教程
javascript·ubuntu·typescript
橘子编程10 小时前
React 19 全栈开发实战指南
前端·react.js·前端框架
We་ct10 小时前
LeetCode 50. Pow(x, n):从暴力法到快速幂的优化之路
开发语言·前端·javascript·算法·leetcode·typescript·
弓.长.10 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-svg(CAPI) — 矢量图形组件
react native·react.js·harmonyos