Как я могу обновить вызов API при повторном рендеринге?

Question

Я учу себя React Hooks и хочу обновить вызов API, когда пользователь вводит в поле поиска. Вроде живого поиска. Я понял, что событие запускается только при загрузке страницы, но как я могу решить эту проблему?

Образец здесь: https://codesandbox.io/s/6x1xp57zmk

import React, {useState, useEffect} from 'react';

function App() {

  const [cardNames, setCardName] = useState([])

  const rezCards = async () => {
    //const rez = await fetch('https://api.scryfall.com/cards?page=3')
    const rez = await fetch ('https://api.scryfall.com/catalog/card-names')
    const json = await rez.json()
    setCardName(json.data)
  }

  useEffect(() => {
    rezCards()
  },[])

  return <ul>{cardNames
    .slice(0,50)
    .map(
      (cardName) => {
        return <li key={cardName}>{cardName}</li>
      }
    )}</ul>
}

export default App

Answer 1

Есть кое-что, на что стоит взглянуть. Чтобы запретить множественные вызовы API при наборе текста в окне поиска, используйте технику под названием debounce, этого можно добиться с помощью ловушек реагирования:

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay],
  );

  return debouncedValue;
}

function App() {

  const debouncedInput = useDebounce(searchInputValue, 300);
  useEffect(() => {
    rezCards()
  },[debouncedInput])
}

Answer 2

Проблема может быть здесь:

useEffect(() => {
    rezCards()
},[])

Вы оставили второй аргумент как пустой массив, поэтому useEffect запускается только один раз, когда компонент монтируется, точно так же, как componentDidMount.

Если вы хотите запускать useEffect при каждом изменении состояния, вы можете добавить это состояние в качестве зависимости для ловушки, например,

const { callThisEffectWhenThisValueIsChanged, changeValue } = useState('');

useEffect(() => {
    // Do anything with here, for eg call APIs
},[callThisEffectWhenThisValueIsChanged])

changeValue(newValue);

Таким образом, в вашем коде CodeSandbox все, что вам нужно сделать, это добавить свой searchInput в зависимость, и он будет вызывать ловушку снова всякий раз, когда изменяется входной поиск.

useEffect(() => {
    rezCards();
}, [searchInput]);

Всегда помните, что всякий раз, когда ваш эффект использует какое-либо состояние, вам нужно добавить это состояние в качестве зависимости для ловушек эффектов

Более подробную информацию вы можете найти в документе React Hook

.