解决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时，就会发生"Cannot assign to 'current' because it is a read-only property"错误。为了解决该错误，请在ref的类型中包含null。比如说，const ref = useRef<string | null>(null) 。

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

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

// 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的类型中，我们使用联合类型来包括null类型，这使它成为可变ref对象。

现在这个例子中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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

搭建React Native热更新平台的详细过程
这篇文章主要介绍了搭建React Native热更新平台,要实现 React Native 热更新功能，有四种思路 Code Push、Pushy、Expo 和自研，感兴趣的朋友一起通过本文学习吧
2022-05-05
React实现路由鉴权的实例详解
React应用中的路由鉴权是确保用户仅能访问其授权页面的方式,用于已登录或具有访问特定页面所需的权限,这篇文章就来记录下React实现路由鉴权的流程,需要的朋友可以参考下
2024-07-07
手把手教您实现react异步加载高阶组件
这篇文章主要介绍了手把手教您实现react异步加载高阶组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
React中异步数据更新不及时问题及解决
这篇文章主要介绍了React中异步数据更新不及时问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Rect Intersection判断两个矩形是否相交
这篇文章主要为大家介绍了Rect Intersection判断两个矩形是否相交的算法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
useEffect中return函数的作用和执行时机解读
这篇文章主要介绍了useEffect中return函数的作用和执行时机,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
react组件多次渲染问题的解决
本文主要介绍了react组件多次渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
React高级指引之Refs and the DOM使用时机详解
在典型的React数据流中，props是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的props来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件
2023-02-02
浅析React中的受控组件和非受控组件
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
2021-05-05
React native ListView 增加顶部下拉刷新和底下点击刷新示例
这篇文章主要介绍了React native ListView 增加顶部下拉刷新和底下点击刷新示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04