REACT useEffect () игнорирует localStorage и все равно вызывает новый запрос API - PullRequest
Новая
       73

REACT useEffect () игнорирует localStorage и все равно вызывает новый запрос API

0 голосов
/ 17 июня 2020

Я создаю приложение для поиска по каталогу и использую контекст (API) для выполнения вызовов API и хранения результатов.

ПРОБЛЕМА №1: при начальном монтировании useEffect Я проверяю, есть ли у localStorage предыдущие результаты, и хочу использовать их для заполнения состояния. У меня есть данные в localStorage, но useEffect игнорирует их и все равно вызывает getSearchResults(). Это почему? 

 useEffect(() => {
    const searchResultsFromLS = getSearchFromLS();

    if (searchResultsFromLS) {
      setSearchResults(searchResultsFromLS); // doesn't work. Goes on to call getSearchResults() anyway.
    }

    getSearchResults();
  }, []);

const getSearchResults = async () => {
    if (searchText === "") {
      return;
    }
    const beers = await fetchBeers(
      searchText,
      searchType,
      pageNum,
      productsPerPage
    );

    setSearchResults(beers);
    setSearchInLS(beers);
  };

ПРОБЛЕМА № 2: Второй useEffect срабатывает всякий раз, когда пользователь обновляет страницу, потому что searchText установлен на пустую строку. Итак, useEffect вызывает getSearchResults(). Я хочу сохранить предыдущий поиск в случае обновления страницы sh, поэтому я попытался защитить себя от вызова API, добавив if вверху getSearchResults() - поэтому, если пользователь просто обновляется, пустой searchText не должен запускать новый вызов API. Но вызов API по-прежнему выполняется с пустой строкой! В чем дело?? Большое спасибо, умные люди. 

// liten to state changes
  useEffect(() => {
    getSearchResults();
  }, [searchText, searchType, pageNum, productsPerPage]);

 const getSearchResults = async () => {
    if (searchText === "") {
      return;
    }
    const beers = await fetchBeers(
      searchText,
      searchType,
      pageNum,
      productsPerPage
    );

    setSearchResults(beers);
    setSearchInLS(beers);
  };
...