react null報錯怎麼辦

react null報錯的解決方法：1、開啟對應的js檔案；2、檢查元素是否已渲染到DOM上；3、在useEffect鉤子中存取ref，或是當事件觸發時再存取ref即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react null報錯怎麼辦？

React報錯之ref回傳undefined或null

當我們試圖在其對應的DOM元素被渲染之前存取其current屬性時，React的ref通常會傳回undefined或null。為了解決該問題，可以在useEffect鉤子中存取ref，或當事件觸發時再存取ref。

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
    </div>
  );
}

useEffect

useRef()鉤子可以傳遞一個初始值作為參數。此鉤子傳回一個可變的ref對象，ref對像上的current屬性被初始化為傳遞的參數。

我們沒有為useRef傳遞初始值，因此其current屬性設定為undefined。如果我們將null傳遞給鉤子，如果立即存取其current屬性，將會得到null。

要注意的是，我們必須存取ref物件上的current屬性，以此來存取設定了ref屬性的div元素。

當我們為元素傳遞ref屬性時，比如說，11a9c0119a7de7705cd9417a8e6c4780 ，React將ref物件的.current屬性設定為對應的DOM節點。

我們使用useEffect鉤子，是因為我們想要確保ref已經設定在元素上，並且元素已經渲染到DOM上。

如果我們嘗試在元件中直接存取ref上的current屬性，我們會得到undefined，因為 ref 還沒有被設置，而且 div 元素還沒有被渲染。

事件

你也可以在事件處理函式中存取ref的current屬性。

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  const handleClick = () => {
    console.log(ref.current); // ?️ element here
  };
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

當使用者點擊按鈕的時候，ref已經被設定好了，對應的元素已經被渲染到DOM中，所以我們能夠存取它。

總結

可以在useEffect鉤子中存取ref，或當事件觸發時再存取ref。也就是說，要確保元素已經渲染到DOM上。

推薦學習：《react影片教學》

以上是react null報錯怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！