我有一个使用NextJS的聊天应用程序，我试图添加一种发送GIPHY图像的方法。
我已经设置好了，但在giphy.search()和giphy.trending()调用之间切换时遇到了问题。基本上，我有一个组件，显示网格，其中包含当时的趋势GIF。但在网格上方，我有一个文本输入，用户可以在其中搜索特定的GIF。此搜索输入的值存储在父组件的状态中。
我最初尝试只用一个组件来显示网格（只显示趋势）：

<Grid
  fetchGifs={(offset: number) => giphy.trending({ offset: offset, limit: 10 })}
  width={width}
  columns={2}
  gutter={8}
  onGifClick={onClick}
/>

既然这样做了，我试着添加搜索功能：

<Grid
  fetchGifs={
    (offset: number) => {
      if (searchTerm) {
        return giphy.search(searchTerm, { sort: 'relevant', lang: 'en', offset: offset, limit: 10 });
      } else {
        return giphy.trending({ offset: offset, limit: 10 });
      }
    }
  }
  width={width}
  columns={2}
  gutter={8}
  onGifClick={onClick}
/>

然而，SDK正在出错。所以我最终做了两个独立的组件-一个是趋势GIF，另一个是可搜索的GIF：

import { Grid } from '@giphy/react-components';
import { GiphyFetch } from '@giphy/js-fetch-api';
import Constants from '@/utilities/constants';
import { GIFFetcherProps } from '@/types';

const TrendingGIPHY = ({ width, onClick }: GIFFetcherProps) => {
  const giphy = new GiphyFetch(Constants.GIPHY_API_KEY);

  return (
    <Grid
      fetchGifs={(offset: number) => giphy.trending({ offset: offset, limit: 10 })}
      width={width}
      columns={2}
      gutter={8}
      onGifClick={onClick}
    />
  );
};

export default TrendingGIPHY;

import { Grid } from '@giphy/react-components';
import { GiphyFetch } from '@giphy/js-fetch-api';
import Constants from '@/utilities/constants';
import { SearchGIFFetcherProps } from '@/types';

const SearchGIPHY = ({ searchTerm, width, onClick }: SearchGIFFetcherProps) => {
  const giphy = new GiphyFetch(Constants.GIPHY_API_KEY);

  return (
    <Grid
      fetchGifs={(offset: number) =>
        giphy.search(searchTerm, { sort: 'relevant', lang: 'en', offset: offset, limit: 10 })
      }
      width={width}
      columns={2}
      gutter={8}
      onGifClick={onClick}
    />
  );
};

export default SearchGIPHY;

然后在父组件上，我只是确定要渲染哪个GIPHY组件：

{searchTerm ? (
  <SearchGIPHY
    searchTerm={searchTerm}
    width={width}
    onClick={handleGIFClick}
  />
) : (
  <TrendingGIPHY width={width} onClick={handleGIFClick} />
)}

这是有点工作，但不是真的。它能够在基于searchTerm的正确组件之间来回切换。但是，searchable组件只搜索第一个字母。我不知道该怎么做。