React Native中如何延迟加载NearbyJobs组件规避API请求限制

以下是三种可行的实现方式，你可以根据项目需求选择：

方案1：修改useFetch Hook支持延迟请求 #

这是最灵活的方案，让Hook本身支持延迟发起请求，后续其他组件也能复用该逻辑。

修改useFetch.js代码，新增delay参数并在useEffect中通过定时器控制请求时机：

import { useState, useEffect } from "react";
import axios from "axios";

const useFetch = (endpoint, query, delay = 0) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const options = {
    method: "GET",
    url: `https://jsearch.p.rapidapi.com/${endpoint}`,
    params: { ...query },
    headers: {
      "X-RapidAPI-Key": "",
      "X-RapidAPI-Host": "jsearch.p.rapidapi.com",
    },
  };

  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await axios.request(options);
      setData(response.data.data);
    } catch (err) {
      setError(err);
      alert(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    // 设置延迟定时器，清理函数防止组件卸载后定时器仍执行
    const timer = setTimeout(fetchData, delay);
    return () => clearTimeout(timer);
  }, [delay]);

  const refetch = () => {
    setLoading(true);
    fetchData();
  };

  return { data, error, loading, refetch };
};

export default useFetch;

在Nearbyjobs组件中使用时，传入5000毫秒的延迟参数：

// Nearbyjobs.js
const { data, loading, error } = useFetch('你的附近职位接口', 查询参数, 5000);

Popularjobs组件保持原有调用方式即可（默认delay=0，立即发起请求）。

方案2：在Nearbyjobs组件内部控制请求时机 #

如果不想修改通用的useFetch Hook，可以在Nearbyjobs组件内手动延迟触发请求。

首先修改useFetch，新增autoFetch参数控制是否自动发起请求：

// useFetch.js
const useFetch = (endpoint, query, autoFetch = true) => {
  // ...原有代码不变

  useEffect(() => {
    if (autoFetch) {
      fetchData();
    }
  }, [autoFetch]);

  // ...原有代码不变
};

然后在Nearbyjobs组件中关闭自动请求，通过定时器延迟调用refetch：

// Nearbyjobs.js
import { useEffect } from 'react';
import useFetch from './useFetch';

const Nearbyjobs = () => {
  // 关闭自动请求，后续手动触发
  const { data, loading, error, refetch } = useFetch('你的附近职位接口', 查询参数, false);

  useEffect(() => {
    // 延迟5秒调用refetch发起请求
    const timer = setTimeout(refetch, 5000);
    return () => clearTimeout(timer);
  }, [refetch]);

  // ...原有渲染逻辑
};

方案3：父组件控制Nearbyjobs的渲染时机 #

这是最简单的实现方式，无需修改Hook或子组件，直接在父组件中延迟渲染Nearbyjobs：

import { useState, useEffect } from 'react';
// ...其他必要导入

const ParentComponent = () => {
  const [showNearby, setShowNearby] = useState(false);

  useEffect(() => {
    // 延迟5秒后显示Nearbyjobs组件，此时才会触发其内部的API请求
    const timer = setTimeout(() => setShowNearby(true), 5000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <ScrollView showsVerticalScrollIndicator={false} horizontal={false}>
      <View style={{ flex: 1, padding: SIZES.medium }}>
        <Welcome />
        <Popularjobs />
        {showNearby && <Nearbyjobs />}
      </View>
    </ScrollView>
  );
};

注意事项 #

• 所有方案都添加了定时器清理函数，避免组件卸载后定时器仍执行导致内存泄漏。
• 方案1适合需要多处延迟请求的场景，方案3适合快速实现的场景。

内容的提问来源于stack exchange，提问作者Kooshal