? 优质资源分享 ?
| 学习路线指引（点击解锁） | 知识定位 | 人群定位 |
|---|---|---|
| ? Python实战微信订餐小程序 ? | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| ?Python量化交易实战? | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
正文从这开始~
总览
当我们用一个null值初始化一个ref，但在其类型中不包括null时，就会发生"Cannot assign to 'current' because it is a read-only property"错误。为了解决该错误，请在ref的类型中包含null。比如说，const ref = useRef(null) 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Lt4jKQ5-1660237758154)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0dc5f7bec50a42d9bcb629457b2ed066~tplv-k3u1fbpfcp-watermark.image?)]
这里有个例子来展示错误是如何发生的。
// App.tsx
import {useEffect, useRef} from 'react';
const App = () => {
const ref = useRef(null);
useEffect(() => {
// ⛔️ Error: Cannot assign to 'current' because it is a read-only property.ts(2540)
ref.current = 'hello';
}, []);
return (
<div>
<h2>hello worldh2>
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 = useRefnull>(null);
useEffect(() => {
ref.current = 'hello';
}, []);
return (
<div>
<h2>hello worldh2>
div>
);
};
export default App;
在ref的类型中，我们使用联合类型来包括null类型，这使它成为可变ref对象。
现在这个例子中
ref的类型是字符串或null，它的current属性可以赋值为这两种类型中的任意一种的值。
DOM元素
如果你的引用指向一个DOM元素，情况也是一样的。如果你需要改变ref的current属性的值，你必须将钩子的类型定为 const ref = useRef(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。
转载请注明：xuhss » React报错之Cannot assign to ‘current’ because it is a read-only property