資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 React useEffect 呼叫載入函式？
我們將使用 React useEffect 鉤子來呼叫我們的載入函式。此鉤子允許我們指定一個將在特定元件生命週期事件（例如元件掛載時）執行的函式。透過將我們的載入函式作為依賴項傳遞，我們確保它將在元件載入或更新時被呼叫。
React useEffect
useEffect 是 React 中的一個鉤子，允許您將元件與外部系統同步。
它在元件渲染後執行，可用於獲取資料、更新 DOM 或設定事件監聽器。
它接受兩個引數：一個包含效果邏輯的函式和一個依賴項列表。
如果需要，效果函式應返回一個清理函式。
useEffect 類似於 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。
方法
您可以透過將其作為鉤子第二個引數中的依賴項傳遞來使用 React 的 useEffect 鉤子呼叫載入函式。載入函式應在 useEffect 的回撥函式內部呼叫。
示例
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
loadData();
}, []); // Pass an empty array to only call the function once on mount.
function loadData() {
// Fetch data or perform other loading logic here
}
// ... component render logic
}
您還可以將變數作為依賴項傳遞給 loadData 函式，以便當依賴項發生變化時，loadData 函式將再次被呼叫。
import { useEffect } from 'react';
function MyComponent({id}) {
useEffect(() => {
loadData(id);
}, [id]);
function loadData(id) {
// Fetch data or perform other loading logic here
}
// ... component render logic
}
需要注意的是，為了避免無限迴圈，由載入函式引起的任何狀態更新都應在單獨的效果中完成。
最終程式碼
這是一個使用 useEffect 鉤子在 React 元件中載入資料的示例 -
App.js
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
async function fetchData() {
setIsLoading(true);
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const json = await response.json();
setData(json);
} catch (error) {
console.error(error);
} finally {
setIsLoading(false);
}
}
fetchData();
}, []);
if (isLoading) {
return <div style={{ color: 'black' }}>Loading...</div>;
}
if (data) {
return <div style={{ color: 'black' }}>{data.map(item => (<div key={item.id}>
{item.name}
</div>))}</div>;
}
return <div style={{ color: 'black' }}>No data</div>;
}
export default MyComponent;
在此示例中，MyComponent 元件使用 useEffect 鉤子在元件首次渲染時從 API 載入資料 -
該鉤子接受兩個引數：一個在元件渲染時執行的回撥函式，以及一個確定何時應執行效果的依賴項陣列。
在本例中，我們將一個空陣列作為第二個引數傳遞，這告訴 React 只在元件首次渲染時執行一次效果。
回撥函式 fetchData 首先將 isLoading 狀態設定為 true，這會導致元件顯示“載入中…”訊息。
然後它使用 fetch API 從 API 載入資料並等待響應完成。
然後它解析來自響應的 JSON 資料，並使用解析後的資料設定 data 狀態。
如果發生錯誤，它會將錯誤記錄到控制檯。最後，它將 isLoading 狀態設定為 false，這會導致元件顯示載入的資料或“無資料”訊息（如果 API 返回空或錯誤）。
元件根據當前狀態渲染不同的訊息：“載入中…”（正在獲取資料時）、資料本身（資料已載入時）以及“無資料”（如果 API 返回空或錯誤）。
請注意，此示例使用 async/await 處理 fetch API 返回的 Promise，如果您使用的是舊版本的 javascript，則可以使用 then() 和 .catch() 方法。
輸出
14K+ 瀏覽量
