解決React報錯Cannot assign to 'current' because it is a read-only property

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

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

總覽

當我們用一個null值初始化一個ref，但在其類型中不包括null時，就會發(fā)生"Cannot assign to 'current' because it is a read-only property"錯誤。為了解決該錯誤，請在ref的類型中包含null。比如說，const ref = useRef<string | null>(null) 。

這里有個例子來展示錯誤是如何發(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;

上面例子的問題在于，當我們將null作為初始值傳遞到useRef鉤子中時，并且我們傳遞給鉤子的泛型中沒有包括null類型，我們創(chuàng)建了一個不可變的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的類型中，我們使用聯(lián)合類型來包括null類型，這使它成為可變ref對象。

現(xiàn)在這個例子中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。

原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報錯Cannot assign to 'current' because it is a read-only property的詳細內容，更多關于React 報錯assign current的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: