無法分配給“當前”，因為它是只讀屬性

Question

我試圖讓 useRef obj 成為 null 或 function 這里是代碼片段

import "./styles.css";
import { useState, useRef, useEffect } from "react";
export default function App() {
  const testRef = useRef<string | null>(null);
  const unblockRef = useRef<() => void | null>(null);

  useEffect(() => {
    const test = () => {
      console.log("hey");
    };

    testRef.current = "";

    // this would give the error code
    unblockRef.current = null;
    // unblockRef.current = "saddsa";
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

這是游樂場鏈接，來自其他堆棧溢出帖子，似乎我只需要在初始化 useRef obj 時傳遞 null 類型。

我用 testRef 測試了邏輯，它工作正常，似乎如果 useRef 類型是 function 會帶來麻煩，感謝您提供任何幫助！

Answer 1

這只是一個 TypeScript 錯誤。 你的語法有問題：

const unblockRef = useRef<() => void | null>(null);

這被解釋為返回 void 或 null 的 function 。

因此，您需要確保它是function 或 null ：

const unblockRef = useRef<(() => void) | null>(null);

Answer 2

它的| 運算符，類型的優先級

() => void | null

實際上是

() => (void | null)

如果你添加一些明確的括號來制作類型

const unblockRef = useRef<(() => void) | null>(null);

然后你可以重新分配它。

Answer 3

將多種類型分配給變量時，如果其中一種類型是回調，則必須將回調包裝在它自己的一組括號中。

const unblockRef = useRef<(() => void) | null>(null);

這是因為您可以從 function 返回多種類型。因此，從邏輯上講，TypeScript 認為您的 function 將返回void或null - 而不是僅返回 void。