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);
相关推荐
purpleseashell_Lili4 小时前
如何学习 AG-UI 和 CopilotKit
javascript·typescript·react
仙人掌一号8 小时前
梳理SPA项目Router原理和运行机制 [共2500字-阅读时长10min]
前端·javascript·react.js
2401_860494709 小时前
React Native鸿蒙跨平台开发:error SyntaxError:Unterminated string constant.解决bug错误
javascript·react native·react.js·ecmascript·bug
接着奏乐接着舞10 小时前
react useMeno useCallback
前端·javascript·react.js
北辰alk12 小时前
React Native vs React Web:深度对比与架构解析
react native·react.js
黛色正浓14 小时前
【React】极客园案例实践-文章列表模块
javascript·react.js·ecmascript
m0_7269659816 小时前
ReAct 小发展
前端·react.js·前端框架
2401_8603195216 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Overlay 遮罩层(创建一个遮罩层)
react native·react.js·harmonyos
七夜zippoe16 小时前
基于ReAct框架的智能体构建实战 - 从原理到企业级应用
前端·javascript·react.js·llm·agent·react
ujainu17 小时前
Flutter入门:Dart基础与核心组件速成
javascript·flutter·typescript