解決React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property

更新時(shí)間：2022年12月02日 14:48:34 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(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)文章！

您可能感興趣的文章:

相關(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組件多次渲染問題的解決
本文主要介紹了react組件多次渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
React高級(jí)指引之Refs and the DOM使用時(shí)機(jī)詳解
在典型的React數(shù)據(jù)流中，props是父組件與子組件交互的唯一方式。要修改一個(gè)子組件，你需要使用新的props來重新渲染它。但是，在某些情況下，你需要在典型數(shù)據(jù)流之外強(qiáng)制修改子組件
2023-02-02
淺析React中的受控組件和非受控組件
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實(shí)現(xiàn)。下面就說說這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2021-05-05
React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例
這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04