Переменные, деструктурированные из useState, непригодны для использования над оператором return? - PullRequest
Новая
       83

Переменные, деструктурированные из useState, непригодны для использования над оператором return?

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

Я застрял с поставщиком контекста React, где я определяю состояние с помощью useState, а затем хочу передать значения текущего состояния, которые я деструктурирую из useState, в служебную функцию getSearchResults(), которая создает строку запроса API и возвращает объект JSON.

ПРОБЛЕМА: все деструктурированные значения go не заметны JS. При передаче в функцию getSearchResults() все searchText, pageNum и productsPerPage не определены. Кто-нибудь может помочь? Мерси! 

  const [searchText, setSearchText] = useState("");
  const [pageNum, setPageNum] = useState(1);
  const [productsPerPage, setproductsPerPage] = useState(10);

  const [searchResults, setSearchResults] = useState([]);

  const getSearchResults = (searchText, pageNum, productsPerPage) =>
    setSearchResults(fetchBeers(searchText, pageNum, productsPerPage));

  return (
    <SearchContext.Provider
      value={{
        searchResults,
        getSearchResults,
      }}
    >
      {children}
    </SearchContext.Provider>
  );
};

export default SearchProvider; ```

1 Ответ

2 голосов
/ 28 мая 2020

Ваши переменные состояния затенены параметрами функции и не передаются. 

const getSearchResults = (searchText, pageNum, productsPerPage) =>
    setSearchResults(fetchBeers(searchText, pageNum, productsPerPage));

Приведенное выше объявление функции означает, что getSearchResults ожидает передачи трех значений и он будет обращаться к ним как searchText, pageNum и productsPerPage. Они будут иметь приоритет над любыми другими переменными в пределах той же области действия с тем же именем.

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

Итак вместо этого напишите свою функцию без параметров: 

const getSearchResults = () =>
    setSearchResults(fetchBeers(searchText, pageNum, productsPerPage));

Теперь функция не будет ожидать никаких значений, но будет иметь доступ к переменным состояния.

...