如何用React.js搜索Giphy的GIF直播？

Question

基于 Giphy官方演示(CodeSandBox)，我想为Giphy GIF创建一个实时搜索功能。

下面是它的一个演示。搜索演示（CodeSandBox 它将关键字作为状态，并将关键字状态传递给giphyFetch的搜索方法。但是搜索结果却没有显示。

请问演示中的代码是否有问题，或者有解决这个问题的方法？谢谢您了。

源码

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

的 旋转木马 是否 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}
      />
    </>
...

工作 演示在这里