react null報錯的解決辦法：1、打開相應(yīng)的js文件；2、檢查元素是否已經(jīng)渲染到DOM上；3、在useEffect鉤子中訪問ref，或者當(dāng)事件觸發(fā)時再訪問ref即可。

本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

react null報錯怎么辦？

React報錯之ref返回undefined或null

當(dāng)我們試圖在其對應(yīng)的DOM元素被渲染之前訪問其current屬性時，React的ref通常會返回undefined或者null。為了解決該問題，可以在useEffect鉤子中訪問ref，或者當(dāng)事件觸發(fā)時再訪問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()鉤子可以傳遞一個初始值作為參數(shù)。該鉤子返回一個可變的ref對象，ref對象上的current屬性被初始化為傳遞的參數(shù)。

我們沒有為useRef傳遞初始值，因此其current屬性設(shè)置為undefined。如果我們將null傳遞給鉤子，如果立即訪問其current屬性，將會得到null。

需要注意的是，我們必須訪問ref對象上的current屬性，以此來訪問設(shè)置了ref屬性的div元素。

當(dāng)我們?yōu)樵貍鬟fref屬性時，比如說，<div ref={myRef} /> ，React將ref對象的.current屬性設(shè)置為相應(yīng)的DOM節(jié)點(diǎn)。

我們使用useEffect鉤子，是因?yàn)槲覀兿胍_保ref已經(jīng)設(shè)置在元素上，并且元素已經(jīng)渲染到DOM上。

如果我們嘗試在組件中直接訪問ref上的current屬性，我們會得到undefined，是因?yàn)?ref 還沒有被設(shè)置，而且 div 元素還沒有被渲染。

事件

你也可以在事件處理函數(shù)中訪問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>   ); }

當(dāng)用戶點(diǎn)擊按鈕的時候，ref已經(jīng)被設(shè)置好了，相應(yīng)的元素已經(jīng)被渲染到DOM中，所以我們能夠訪問它。

總結(jié)

可以在useEffect鉤子中訪問ref，或者當(dāng)事件觸發(fā)時再訪問ref。也就是說，要確保元素已經(jīng)渲染到DOM上。

推薦學(xué)習(xí)：《react視頻教程》