Reactjs 如何修复挂钩依赖项数组？

我正在开发一个演示应用程序，我有一个受控的搜索输入。我试图消除onChange事件的影响，以避免在每个笔划上触发API fetch函数。它可以工作，但我得到一个关于依赖项数组的警告：

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}&language=en-US&query=${str}&page=1&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，因为回调收到了一个依赖项未知的函数。改为传递内联函数

错误。根据文档，我应该将依赖项传递到最后一个数组，但是添加

debounce

、

searchForMovies

或

str

会导致错误。我应该如何处理依赖项数组以避免此问题？

在组件外部创建函数

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

---

在组件外部创建函数

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

---

看起来您试图调用的是debounce函数的返回值，而不是函数本身

请注意以下两者之间的区别：

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

及

---

看起来您试图调用的是debounce函数的返回值，而不是函数本身

请注意以下两者之间的区别：

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

及