React报错之Cannot assign to 'current' because a read-only property

原文链接：https://bobbyhadz.com/blog/react-cannot-assign-to-current-because-read-only-property[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

总览

当我们用一个null值初始化一个ref，但在其类型中不包括null时，就会发生"Cannot assign to 'current' because it is a read-only property"错误。为了解决该错误，请在ref的类型中包含null。比如说，const ref = useRef<string | null>(null) 。

react-cannot-assign-to-current-because-read-only.png

这里有个例子来展示错误是如何发生的。

代码语言：javascript复制

// 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类型。

代码语言：javascript复制

// App.tsx
import {useEffect, useRef} from 'react';

const App = () => {
  // 


	

react https 网络安全 


	




	
 0 人点赞