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);
相关推荐
哆啦A梦15883 小时前
Vue3魔法手册 作者 张天禹 09_props的使用
前端·vue.js·typescript
哆啦A梦15883 小时前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
We་ct4 小时前
LeetCode 146. LRU缓存:题解+代码详解
前端·算法·leetcode·链表·缓存·typescript
一只大侠的侠1 天前
React Native for OpenHarmony:日期范围选择器实现
javascript·react native·react.js
一只大侠的侠1 天前
React Native for OpenHarmony:DatePicker 日期选择器组件详解
javascript·react native·react.js
x-cmd1 天前
[x-cmd] Node.js 的关键一步:原生运行 TypeScript 正式进入 Stable
javascript·typescript·node.js·x-cmd
一只大侠的侠1 天前
React Native实战:高性能Popover弹出框组件
javascript·react native·react.js
一只大侠的侠1 天前
React Native for OpenHarmony:Calendar 日程标记与事件管理实现方案
javascript·react native·react.js
拾荒李1 天前
在 Vue 项目里“无痛”使用 React 组件:以 Veaury + Vite 为例
前端·vue.js·react.js
一只大侠的侠1 天前
React Native实战:高性能Overlay遮罩层组件封装与OpenHarmony适配
javascript·react native·react.js