解決React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property
總覽
當(dāng)我們用一個(gè)null值初始化一個(gè)ref,但在其類型中不包括null時(shí),就會(huì)發(fā)生"Cannot assign to 'current' because it is a read-only property"錯(cuò)誤。為了解決該錯(cuò)誤,請(qǐng)?jiān)?code>ref的類型中包含null。比如說,const ref = useRef<string | null>(null) 。

這里有個(gè)例子來展示錯(cuò)誤是如何發(fā)生的。
// 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;
上面例子的問題在于,當(dāng)我們將null作為初始值傳遞到useRef鉤子中時(shí),并且我們傳遞給鉤子的泛型中沒有包括null類型,我們創(chuàng)建了一個(gè)不可變的ref對(duì)象。
正確的泛型
為了解決該錯(cuò)誤,我們必須在傳遞給鉤子的泛型中包括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的類型中,我們使用聯(lián)合類型來包括null類型,這使它成為可變ref對(duì)象。
現(xiàn)在這個(gè)例子中ref的類型是字符串或null,它的current屬性可以賦值為這兩種類型中的任意一種的值。
DOM元素
如果你的引用指向一個(gè)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元素的。因?yàn)闆]有對(duì)其.current屬性進(jìn)行賦值,所以沒有必要在其類型中包含null。
原文鏈接:bobbyhadz.com/blog/react-…
以上就是解決React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property的詳細(xì)內(nèi)容,更多關(guān)于React 報(bào)錯(cuò)assign current的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 解決React報(bào)錯(cuò)Property does not exist on type 'JSX.IntrinsicElements'
- 解決React報(bào)錯(cuò)Property value does not exist on type HTMLElement
- 解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget
- Can't?perform?a?React?state?update?on?an?unmounted?component報(bào)錯(cuò)解決
- Objects are not valid as a React child報(bào)錯(cuò)解決
- 解決React報(bào)錯(cuò)No duplicate props allowed
- 解決React報(bào)錯(cuò)`value` prop on `input` should not be null
- 解決React報(bào)錯(cuò)Property 'X' does not exist on type 'HTMLElement'
相關(guān)文章
搭建React?Native熱更新平臺(tái)的詳細(xì)過程
這篇文章主要介紹了搭建React?Native熱更新平臺(tái),要實(shí)現(xiàn)?React?Native?熱更新功能,有四種思路?Code?Push、Pushy、Expo?和自研,感興趣的朋友一起通過本文學(xué)習(xí)吧2022-05-05
React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解
React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁面的方式,用于已登錄或具有訪問特定頁面所需的權(quán)限,這篇文章就來記錄下React實(shí)現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下2024-07-07
手把手教您實(shí)現(xiàn)react異步加載高階組件
這篇文章主要介紹了手把手教您實(shí)現(xiàn)react異步加載高階組件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
React中異步數(shù)據(jù)更新不及時(shí)問題及解決
這篇文章主要介紹了React中異步數(shù)據(jù)更新不及時(shí)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Rect Intersection判斷兩個(gè)矩形是否相交
這篇文章主要為大家介紹了Rect Intersection判斷兩個(gè)矩形是否相交的算法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī)解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時(shí)機(jī),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React高級(jí)指引之Refs and the DOM使用時(shí)機(jī)詳解
在典型的React數(shù)據(jù)流中,props是父組件與子組件交互的唯一方式。要修改一個(gè)子組件,你需要使用新的props來重新渲染它。但是,在某些情況下,你需要在典型數(shù)據(jù)流之外強(qiáng)制修改子組件2023-02-02
React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例
這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04

