Блог

Я работаю над демонстрационным приложением, и у меня есть контролируемый поисковый ввод. Я пытаюсь отменить событие onChange, чтобы не запускать функцию выборки API при каждом ударе. Это работает, но я получаю предупреждение о массиве зависимостей:

 import React, { useState, useEffect, useCallback } from 'react';
import debounce from 'lodash/debounce'

[...]

const searchForMovies = (str) => {
    fetch(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_API_KEY}amp;language=en-USamp;query=${str}amp;page=1amp;include_adult=false`)
    .then(response => response.json())
    .then(data => setMovies({movies: data.results}));
}

const handleChange = event => {
    const searchTerm = event.target.value
    setSearch({[event.target.name]: event.target.value});
    debounceSearch(searchTerm);
}

const debouncedSearch = useCallback(
    debounce((str) => searchForMovies(str), 500), []
);
 

Это работает, но я получаю React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead сообщение об ошибке. Согласно документации, я должен передавать зависимости в последний массив, но добавление либо debounce , searchForMovies либо str приводит к ошибке. Как именно я должен обрабатывать массив зависимостей, чтобы избежать этой проблемы?

создайте функцию вне вашего компонента

 const debouncedSearchForMovie = debounce((str) => searchForMovies(str), 500)
...
const debouncedSearch = useCallback(
    () => debouncedSearchForMovie(str), [debouncedSearchForMovie, str]
);
 

похоже, вы пытаетесь вызвать возвращаемое значение функции debounce, а не саму функцию.

обратите внимание на разницу между:

 useCallback(() => myFunction(), [dependency]); // function to invoke.
 

и

 useCallback(myFunction(), [dependency]); // this function has already been invoked.