Apa yang perlu dilakukan jika ralat nol bertindak balas dilaporkan

Penyelesaian untuk bertindak balas ralat null: 1. Buka fail js yang sepadan 2. Periksa sama ada elemen telah diberikan kepada DOM 3. Akses ref dalam cangkuk useEffect, atau akses ref apabila acara itu; dicetuskan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah yang perlu saya lakukan jika ralat nol tindak balas dilaporkan?

React error ref mengembalikan tidak ditentukan atau null

Apabila kami cuba mengakses sifat semasa elemen DOM yang sepadan sebelum ia diberikan, React's ref Biasanya kembali tidak ditentukan atau batal. Untuk menyelesaikan masalah ini, anda boleh mengakses ref dalam cangkuk useEffect, atau mengakses ref apabila peristiwa dicetuskan.

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

Cangkuk useRef() boleh melepasi nilai awal sebagai parameter. Cangkuk ini mengembalikan objek ref boleh ubah, dan sifat semasa pada objek ref dimulakan kepada parameter yang diluluskan.

Kami tidak lulus nilai awal untuk useRef, jadi sifat semasanya ditetapkan kepada tidak ditentukan. Jika kita menghantar null ke cangkuk, kita akan mendapat null jika kita mengakses harta semasanya dengan segera.

Perlu diambil perhatian bahawa kita mesti mengakses atribut semasa pada objek ref untuk mengakses elemen div dengan set atribut ref.

Apabila kita menghantar atribut ref kepada elemen, katakan,

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>
  );
}