Добавление зависимости в ловушку useEffect вызывает бесконечный цикл - PullRequest
Новая
       15

Добавление зависимости в ловушку useEffect вызывает бесконечный цикл

2 голосов
/ 31 октября 2019

У меня есть компонент-обертка вокруг панели поиска, который выбирает предложения при каждом нажатии клавиши, а затем выполняет поиск, когда выбрано предложение или пользователь нажимает ввод / поиск. После выбора значения поиска я хочу сохранить этот элемент поиска в локальном хранилище, чтобы показать его в фокусе, как в Google. Вот фрагмент моего компонента 

export default function App() {
    const [results, resultsLoading, resultsError, setParams] = useFetch();
    const [suggestions, ,suggestionsError, setSuggestionsParams] = useFetch();
    const [showSearchSuggestions, setShowSearchSuggestions] = useState<boolean>(true);
    const [recentSearches, setRecentSearches] = useLocalStorage('recent_searches', []);
    const [searchAttributes, setSearchAttributes] = useState<SearchAtrributesInterface>({
        value: '',
        fetchType: SEARCH_FETCH_TYPES.SUGGESTIONS
    });

    useEffect(() => {
        const getSearchSuggestions = () => setSuggestionsParams(getAutoCompleteURL(searchAttributes.value));
        const getSearchResults = () => {
            setParams(getSearchURL(searchAttributes.value));
            setShowSearchSuggestions(false);
        };

        if (searchAttributes.value) {
            if (searchAttributes.fetchType === SEARCH_FETCH_TYPES.SUGGESTIONS) {
                getSearchSuggestions();
            } else {
                getSearchResults();
                setRecentSearches([searchAttributes.value, ...recentSearches])
            }
        }
    }, [searchAttributes, setParams, setSuggestionsParams]);

    return ( ... );
};

Это прекрасно работает, но затем я получаю предупреждение: React Hook useEffect has missing dependencies: 'recentSearches' and 'setRecentSearches'. Either include them or remove the dependency array react-hooks/exhaustive-deps. После добавления этих двух в массив зависимостей я застреваю в бесконечном цикле, потому что, конечно, состояние recentSearches устанавливается, вызывает его повторную визуализацию и так далее. Я хотел бы найти решение вместо добавления // eslint-disable-next-line, потому что я чувствую, что что-то действительно не так, что я делаю. Кто-нибудь знает, что я мог бы сделать по-другому, чтобы предотвратить бесконечный цикл и предотвратить предупреждение линтера?

1 Ответ

1 голос
/ 31 октября 2019

Здесь есть две вещи.

Поскольку вы хотите использовать существующее значение состояния для обновления того же состояния, вы должны использовать метод обратного вызова 

setRecentSearches(prevRececentSearches => ([searchAttributes.value, ...prevRececentSearches]));

Также, когда выабсолютно уверен, что вы не пропустили ни одной зависимости, вы можете отключить предупреждение. Пожалуйста, проверьте этот пост для более подробной информации: Как исправить предупреждение об отсутствующей зависимости при использовании useEffect React Hook?

...