React报错之Cannot assign to 'current' because it is a read-only property
2023-02-18 16:41:38 时间
正文从这开始~
总览
当我们用一个null
值初始化一个ref
,但在其类型中不包括null
时,就会发生"Cannot assign to 'current' because it is a read-only property"错误。为了解决该错误,请在ref
的类型中包含null
。比如说,const ref = useRef<string | null>(null)
。
这里有个例子来展示错误是如何发生的。
// App.tsx
import {useEffect, useRef} from 'react';
const App = () => {
const ref = useRef<string>(null);
useEffect(() => {
// ⛔️ Error: Cannot assign to 'current' because it is a read-only property.ts(2540)
ref.current = 'hello';
}, []);
return (
<div>
<h2>hello world</h2>
</div>
);
};
export default App;
上面例子的问题在于,当我们将null
作为初始值传递到useRef
钩子中时,并且我们传递给钩子的泛型中没有包括null
类型,我们创建了一个不可变的ref
对象。
正确的泛型
为了解决该错误,我们必须在传递给钩子的泛型中包括null
类型。
// App.tsx
import {useEffect, useRef} from 'react';
const App = () => {
// ?️ include null in the ref's type
const ref = useRef<string | null>(null);
useEffect(() => {
ref.current = 'hello';
}, []);
return (
<div>
<h2>hello world</h2>
</div>
);
};
export default App;
在ref
的类型中,我们使用联合类型来包括null
类型,这使它成为可变ref
对象。
现在这个例子中
ref
的类型是字符串或null
,它的current
属性可以赋值为这两种类型中的任意一种的值。
DOM元素
如果你的引用指向一个DOM元素,情况也是一样的。如果你需要改变ref
的current
属性的值,你必须将钩子的类型定为 const ref = useRef<HTMLElement | null>(null)
。
注意,如果你不直接赋值给它的current
属性,你不必在 ref
的类型中包含 null
。
// App.tsx
import {useEffect, useRef} from 'react';
const App = () => {
const ref = useRef<HTMLInputElement>(null);
useEffect(() => {
ref.current?.focus();
}, []);
return (
<div>
<input ref={ref} type="text" defaultValue="" />
</div>
);
};
export default App;
上述例子中的ref
是用来聚焦input
元素的。因为没有对其.current
属性进行赋值,所以没有必要在其类型中包含null
。
相关文章
- 15天玩转redis —— 第十篇 对快照模式的深入分析
- 15天玩转redis —— 第九篇 发布/订阅模式
- 15天玩转redis —— 第八篇 你不得不会的事务玩法
- 15天玩转redis —— 第七篇 同事的一次缓存操作引起对慢查询的认识
- 15天玩转redis —— 第六篇 有序集合类型
- 15天玩转redis —— 第五篇 集合对象类型
- 15天玩转redis —— 第四篇 哈希对象类型
- 15天玩转redis —— 第三篇 无敌的列表类型
- 15天玩转redis —— 第二篇 基础的字符串类型
- 15天玩转redis —— 第一篇 开始入手
- 十五天精通WCF——终结篇 那些你需要注意的坑
- 十五天精通WCF——第十四天 一起聊聊FaultException
- 十五天精通WCF——第十三天 用WCF来玩Rest
- 十五天精通WCF——第十二天 说说wcf中的那几种序列化
- 十五天精通WCF——第十一天 如何对wcf进行全程监控
- 十五天精通WCF——第十天 学会用SvcConfigEditor来简化配置
- 十五天精通WCF——第九天 高级玩法之自定义Behavior
- 十五天精通WCF——第八天 对“绑定”的最后一点理解
- 十五天精通WCF——第七天 Close和Abort到底该怎么用才对得起观众
- 十五天精通WCF——第六天 你必须要了解的3种通信模式