如何使用 React.js 实时搜索 Giphy 的 GIF？

Question

基于official Giphy demo(CodeSandBox)，我想为Giphy GIFs创建一个实时搜索功能。

下面是它的演示。
search demo（CodeSandBox）
它将关键字保存为状态，并将关键字状态传递给giphyFetch的搜索方法。
但是没有显示搜索结果。

请问是demo中的代码有问题，还是有解决办法？
谢谢。

源代码

const giphyFetch = new GiphyFetch("sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh");

function App() {
  const [keyword, setKeyword] = useState("");

  const fetchGifs = (offset: number) =>
    giphyFetch.search(keyword, { offset, limit: 10 });

  return (
    <>
      <p>
        <img src="./logo.gif" width="200" alt="Powered by GIPHY" />
      </p>
      <p>
        input keyword
        <input type="text" onChange={e => setKeyword(e.target.value)} />
      </p>
      <h4>search result</h4>
      <Carousel fetchGifs={fetchGifs} gifHeight={200} gutter={6} />
    </>
  );
}

Answer 1

Carousal 在挂载时执行 fetchGifs 一次。所以你需要根据你的输入强制重新挂载onChange。您可以通过添加动态密钥

来做到这一点

像这样

...
     <>
      <p>
        <img src="./logo.gif" width="200" alt="Powered by GIPHY" />
      </p>
      <p>
        input keyword
        <input
          value={keyword}
          type="text"
          onChange={e => setKeyword(e.target.value)}
        />
      </p>
      <h4>search result</h4>
      <Carousel
        key={keyword}
        fetchGifs={() => fetchGifs(5)}
        gifHeight={200}
        gutter={6}
      />
    </>
...

工作demo is here

如何使用 React.js 实时搜索 Giphy 的 GIF？

How can I search Giphy's GIF live with React.js?

reactjs

giphy

giphy-api

react-hooks

源代码