(useRef) 无法分配给“current”，因为它是只读属性

作者

(useRef) 不能分配给 ‘current’ 因为它是只读属性

(useRef) Cannot assign to ‘current’ because it is read-only property

null当我们使用值初始化 ref 但不包含null在其类型中时，会出现错误“无法分配给‘current’，因为它是只读属性” 。

要解决该错误，请null在 ref 的类型中包含，例如
const ref = useRef<string | null>(null).

反应无法分配给电流，因为只读

下面是错误如何发生的示例。

应用程序.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在类型中

为了解决这个错误，我们必须在null我们传递给钩子的泛型的类型中包含。

应用程序.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;

我们使用了一个
联合类型
来包含null在 ref 的类型中，这使它成为一个可变的 ref 对象。

现在示例中 ref 的类型是stringornull 并且current可以为其属性分配两种类型中的任何一种的值。

如果您的 ref 指向 DOM 元素，情况也是如此。

您必须键入钩子，就const ref = useRef<HTMLElement | null>(null)好像您需要更改 ref 的current属性值一样。

null请注意，如果您不直接分配给它的属性，则不必包含在引用的类型中current。

应用程序.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元素。

ref 的属性没有赋值.current，因此没有必要包含null在它的类型中。

如果您收到错误 useRef Object is possibly null，请单击
以下文章。