我有一个使用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组件只搜索第一个字母。我不知道该怎么做。
1条答案
按热度按时间uqzxnwby1#
我在任何地方都找不到与这种方法相关的任何东西,然而,它似乎使用了某种技术来记忆抓取,因此不会进行不必要的重新渲染和抓取。
幸运的是,在挖掘了更多的文档之后,我找到了他们的Github pate,它有一个可运行的演示,并且它有工作示例!https://github.com/Giphy/giphy-js/blob/master/packages/react-components/README.md#bare-bones-example
在查看了他们的代码之后,
1.你的实现基本上是正确的
1.事实证明,Giphy确实在对他们的
Grid
组件进行某种记忆--他们的演示有一个Grid
组件的属性,而你的代码没有。也就是key
换句话说,你可以通过添加它来解决只有第一个字母被解析的问题,就像这样--
(the演示有 prop
key
更复杂,但你可以做出自己的判断)参考