import React, { useState, useEffect } from 'react';
function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    let isMounted = true; // 標(biāo)志組件是否掛載
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('網(wǎng)絡(luò)響應(yīng)錯(cuò)誤');
        }
        const result = await response.json();
        if (isMounted) {
          setData(result);
        }
      } catch (err) {
        if (isMounted) {
          setError(err.message);
        }
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    }
    fetchData();
    return () => {
      isMounted = false; // 組件卸載時(shí)更新標(biāo)志
    };
  }, []); // 空依賴數(shù)組，只在首次掛載時(shí)執(zhí)行
  if (loading) return <div>加載中...</div>;
  if (error) return <div>錯(cuò)誤：{error}</div>;
  return (
    <div>
      <h2>獲取到的數(shù)據(jù)：</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
export default DataFetcher;

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;
  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/data', { signal });
      if (!response.ok) {
        throw new Error('網(wǎng)絡(luò)響應(yīng)錯(cuò)誤');
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err.message);
      }
    } finally {
      setLoading(false);
    }
  }
  fetchData();
  // 清理函數(shù)：取消掛起的請(qǐng)求
  return () => {
    controller.abort();
  };
}, []);

useEffect(() => {
  let currentRequestId = 0;
  async function fetchData() {
    const requestId = ++currentRequestId;
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      // 只有最后一次請(qǐng)求的結(jié)果會(huì)更新狀態(tài)
      if (requestId === currentRequestId) {
        setData(result);
      }
    } catch (err) {
      if (requestId === currentRequestId) {
        setError(err.message);
      }
    } finally {
      if (requestId === currentRequestId) {
        setLoading(false);
      }
    }
  }
  fetchData();
  // 如果依賴變化，currentRequestId會(huì)更新，舊請(qǐng)求結(jié)果將被忽略
}, [/* 依賴項(xiàng) */]);

import { useQuery } from 'react-query';
function DataFetcher() {
  const { data, error, isLoading } = useQuery('dataKey', async () => {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response error');
    return response.json();
  });
  if (isLoading) return <div>加載中...</div>;
  if (error) return <div>錯(cuò)誤：{error.message}</div>;
  return (
    <div>
      <h2>數(shù)據(jù)：</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

// actions.js
export const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_DATA_REQUEST' });
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAILURE', error: error.message });
  }
};

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}
// 使用在搜索輸入框中
const debouncedSearch = debounce((query) => {
  // 發(fā)起異步搜索請(qǐng)求
}, 500);