Как я могу искать GIF Giphy в реальном времени с помощью React. js? - PullRequest
Новая
       46

Как я могу искать GIF Giphy в реальном времени с помощью React. js?

0 голосов
/ 06 мая 2020

На основе официальной демонстрации Giphy (CodeSandBox) , я хотел бы создать функцию поиска в реальном времени для GIF-файлов Giphy.

А ниже приведена его демонстрация.
демонстрационный пример поиска (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} />
    </>
  );
}

1 Ответ

1 голос
/ 06 мая 2020

The Carousal делает fetchGifs один раз при маунте. Поэтому вам нужно принудительно перемонтировать при вводе onChange. Вы можете сделать это, добавив динамический c ключ

Вот так 

...
     <>
      <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}
      />
    </>
...

Рабочий демо здесь

...