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, 11a9c0119a7de7705cd9417a8e6c4780 React menetapkan sifat .current bagi objek ref kepada nod DOM yang sepadan.

Kami menggunakan cangkuk useEffect kerana kami ingin memastikan bahawa ref telah ditetapkan pada elemen dan elemen telah diberikan kepada DOM.

Jika kami cuba mengakses sifat semasa pada ref terus dalam komponen, kami akan menjadi tidak ditentukan kerana ref belum ditetapkan lagi dan elemen div belum dipaparkan.

Acara

Anda juga boleh mengakses sifat semasa ref dalam pengendali acara.

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

Apabila pengguna mengklik butang, ref telah ditetapkan dan elemen yang sepadan telah diberikan ke dalam DOM, jadi kami boleh mengaksesnya.

Ringkasan

Anda boleh mengakses rujukan dalam cangkuk useEffect, atau mengakses rujukan apabila peristiwa dicetuskan. Dalam erti kata lain, pastikan elemen telah diberikan kepada DOM.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apa yang perlu dilakukan jika ralat nol bertindak balas dilaporkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!