Menggunakan useEffect untuk Mengambil Data dalam React

Menggunakan useEffect untuk Mengambil Data dalam React

Dalam React, cangkuk useEffect biasanya digunakan untuk melakukan kesan sampingan dalam komponen berfungsi. Mengambil data daripada API atau pelayan ialah salah satu kesan sampingan yang paling biasa, dan useEffect memudahkan untuk mengurus pengambilan data dalam komponen anda. Di bawah ialah penjelasan terperinci dan contoh cara menggunakan useEffect untuk mengambil data dalam komponen berfungsi React.

---

1. Persediaan Asas

Untuk mengambil data dengan useEffect, anda biasanya menggunakan corak berikut:

• Gunakan useEffect untuk mencetuskan permintaan pengambilan apabila komponen dipasang atau dikemas kini.
• Simpan data yang diambil dalam keadaan komponen menggunakan cangkuk useState.
• Kendalikan keadaan pemuatan dan ralat untuk meningkatkan pengalaman pengguna.

---

2. Contoh Mengambil Data dengan useEffect

Berikut ialah contoh yang menunjukkan cara untuk mengambil data daripada API menggunakan useEffect dan useState:

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

---

3. Pecahan Kod:

• Pembolehubah Keadaan:

  • data: Menyimpan data yang diambil setelah ia berjaya diambil.
  • memuatkan: Keadaan boolean untuk menjejak jika data masih diambil.
  • ralat: Menyimpan sebarang mesej ralat yang berlaku semasa proses pengambilan.

• useEffect Hook:

  • Kami mentakrifkan fungsi tak segerak fetchData dalam cangkuk useEffect.
  • fetchData dipanggil serta-merta apabila komponen dipasang kerana tatasusunan kebergantungan [] kosong.
  • Di dalam fetchData, kami membuat panggilan API menggunakan kaedah fetch(). Selepas mengambil data, kami menyemak ralat (mis., bukan 200 respons) dan mengemas kini keadaan dengan sewajarnya.

• Pemuatan dan Pengendalian Ralat:

  • Komponen pada mulanya memaparkan mesej "Memuatkan..." semasa permintaan pengambilan sedang dijalankan.
  • Jika ralat berlaku semasa pengambilan, mesej ralat dipaparkan.
  • Setelah data berjaya diambil, ia dipaparkan dalam senarai.

---

4. Perkara Utama yang Perlu Diingati:

• Fungsi Async dalam useEffect:

  • useEffect itu sendiri tidak boleh ditandakan sebagai async, tetapi anda boleh menentukan fungsi async di dalam kesan dan memanggilnya.

• Susun Kebergantungan Kosong ([]):

  • Apabila tatasusunan kebergantungan kosong, kesannya berjalan sekali sahaja selepas pemaparan awal, meniru gelagat componentDidMount dalam komponen kelas.

• Pengendalian Ralat:

  • Adalah penting untuk mengendalikan ralat untuk memastikan aplikasi tidak ranap atau berkelakuan di luar jangkaan apabila pengambilan gagal.

• Pengurusan Negeri:

  • Menggunakan useState untuk mengurus keadaan pemuatan, data dan ralat memudahkan untuk mengurus dan memaparkan UI dengan sewajarnya.

---

5. Corak Biasa dengan useEffect untuk Pengambilan Data

Mengambil Data pada Klik Butang (Mencetuskan Kesan Secara Manual)

Kadangkala, anda mungkin tidak mahu mengambil data apabila komponen dipasang tetapi berdasarkan interaksi pengguna, seperti mengklik butang. Dalam kes ini, anda boleh mencetuskan useEffect dengan mengemas kini pembolehubah keadaan daripada pengendali acara.

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

Dalam contoh ini:

• Data diambil hanya selepas butang diklik (setFetchDataFlag(true)).
• useEffect mendengar perubahan pada keadaan fetchDataFlag dan mencetuskan pengambilan apabila ia dikemas kini.

---

6. Kesimpulan

Menggunakan useEffect untuk mengambil data dalam React ialah cara yang cekap dan bersih untuk mengurus kesan sampingan. Dengan menggabungkannya dengan useState, anda boleh mengurus pengambilan data, keadaan pemuatan dan pengendalian ralat dalam komponen berfungsi anda. Sentiasa ingat untuk mengendalikan ralat dan kes tepi untuk memastikan apl anda memberikan pengalaman pengguna yang baik.

Atas ialah kandungan terperinci Menggunakan useEffect untuk Mengambil Data dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!