未捕獲的類型錯誤：無法使用 React 和 useRef 讀取未定義的屬性

Question

所以這是我在目標之外處理的 function 單擊以關閉一些模型和東西，但控制台上的錯誤消息顯示如下錯誤消息：

Uncaught TypeError: Cannot read properties of undefined (reading 'contains')

而且我想知道如何處理undefined ，因此 function 不調用，或者至少從控制台隱藏。

這是我的處理方式：

 let useClickOutside = (handler) => {
        let domNode = useRef();

        useEffect(() => {
            let maybeHandler = (event) => !domNode.current.contains(event.target) && handler();
            document.addEventListener("mousedown", maybeHandler);
            return () => document.removeEventListener("mousedown", maybeHandler);
        });

        return domNode;
    };

Answer 1

解決方案 1 ：使用可選鏈接(?.)

let useClickOutside = (handler) => {
        let domNode = useRef();

        useEffect(() => {
            let maybeHandler = (event) => !domNode.current?.contains(event.target) && handler();
            document.addEventListener("mousedown", maybeHandler);
            return () => document.removeEventListener("mousedown", maybeHandler);
        });

        return domNode;
    };

解決方案 2 ：使用邏輯與(&&)

 let useClickOutside = (handler) => {
        let domNode = useRef();

        useEffect(() => {
            let maybeHandler = (event) =>  domNode.current && !domNode.current.contains(event.target) && handler();
            document.addEventListener("mousedown", maybeHandler);
            return () => document.removeEventListener("mousedown", maybeHandler);
        });

        return domNode;
    };