Giphy React Grid/Carousel组件失效 未调用fetchGifs无GIF返回

问题出在三个容易踩的坑，按下面改完就能正常加载：

• GiphyFetch实例和fetchGifs函数引用不稳定：当前写法每次组件重渲染都会新建Giphy请求实例，同时重新生成fetchGifs函数，Grid/Carousel组件内部会校验传入fetch方法的引用，引用频繁变动会直接中断内部的请求触发逻辑，不会调用传入的fetch函数。
  修复：把giphyFetch实例移到组件外部，保证全生命周期只初始化一次；用useCallback包裹fetchGifs，仅当搜索词变化时才更新函数引用。
• 空搜索词触发非法请求拦截：初始状态下搜索词为空字符串，直接调用search接口传空query属于非法请求，组件内部会对这类初始空请求做静默拦截，根本不会发起fetch调用。
  修复：加判断逻辑，搜索词为空时调用trending接口拉取热门GIF，有输入内容时再走搜索逻辑。
• 依赖版本不兼容：如果改完上述两点还是不触发请求，检查本地安装的@giphy/js-fetch-api和@giphy/react-components大版本是否一致，两个包必须保持同大版本（比如同时用5.x或同时用6.x），跨大版本会因为返回数据结构不匹配，导致组件内部解析失败直接中断执行，不会抛出显式报错。

修复后的完整可运行代码：

import { GiphyFetch } from "@giphy/js-fetch-api";
import { Grid } from "@giphy/react-components";
import useDebounce from "react-use/lib/useDebounce";
import React, { useState, useCallback } from "react";

// 组件外初始化，避免重复创建实例
const giphyFetch = new GiphyFetch("PZpYG85wQpugMlEx02GGqeKfKZ8eMdFZ");

export default function App() {
  const [debouncedInput, setDebouncedInput] = useState<string>("");
  const [term, setTerm] = useState<string>("");
  useDebounce(() => setTerm(debouncedInput), 500, [debouncedInput]);

  const NoResults = <div className="no-results">未找到与「{term}」相关的结果</div>;

  const fetchGifs = useCallback((offset: number) => {
    return term.trim()
      ? giphyFetch.search(term, { offset, limit: 10 })
      : giphyFetch.trending({ offset, limit: 10 });
  }, [term]);

  return (
    <div className="App">
      <h1>GIF搜索</h1>
      <input
        placeholder="输入关键词搜索"
        onChange={({ target: { value } }) => setDebouncedInput(value)}
        value={debouncedInput}
      />
      <Grid
        key={term}
        columns={3}
        gutter={6}
        noResultsMessage={NoResults}
        width={400}
        fetchGifs={fetchGifs}
      />
    </div>
  );
}

调整后Grid和Carousel组件都能正常触发fetch逻辑，正常加载瀑布流和轮播的GIF内容。

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