如何将 setState 值插入 useEffect 挂钩？答案

【问题标题】：How to insert setState value into useEffect hook?如何将 setState 值插入 useEffect 挂钩？
【发布时间】：2020-07-24 10:09:51
【问题描述】：

我观看了一个 Youtube 视频，并制作了自己的食谱应用程序。我是 React.js 的初学者，我已经解决了这个问题大约 2 天。似乎我无法将我的状态值传递给 useEffect 挂钩。这是我的代码示例。错误说

“React Hook useEffect 缺少依赖项：'query'。要么包含它，要么删除依赖项数组”，每次我在输入框中键入它都会触发 useEffect 挂钩。谢谢您，非常感谢您的帮助。

const [recipes, setRecipes] = useState([]);
const [search, setSearch] = useState('');
const [query, setQuery] = useState('steak');

const updateSearch = e => {
    setSearch(e.target.value);
    console.log(search)
}

const getSearch = e => {
    e.preventDefault();
    setQuery(search);
}

useEffect(() => {   // error Is from the Query variable
    const GetRecipe = async () => {
        const APP_ID = "3834705e";
        const APP_KEY = "c23e9514f82c2440abf54b21edd4c3dc";
        const res = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`);
        const data = await res.json();
        setRecipes(data.hits);
      }
    GetRecipe();
},[getSearch]) //this triggers everytime I typed in the input box which is not it is supposed to

return(
    <div className='recipelist'>

        <form onSubmit={getSearch}>
            <input type="search" onChange={updateSearch}/>
            <button type='submit'>submit</button>
        </form>

【问题讨论】：

标签： javascript reactjs api react-hooks

【解决方案1】：

正如错误告诉你的那样，当使用 useEffect 钩子时，该钩子可以接收两个参数，第一个是处理程序效果，第二个是包含效果将使用的所有依赖项的数组，所以你是在 http url 中使用查询状态，您需要将该依赖项传递到数组中，所以可能是这样的。

useEffect(() => {   // error Is from the Query variable
    const GetRecipe = async () => {
        const APP_ID = "3834705e";
        const APP_KEY = "c23e9514f82c2440abf54b21edd4c3dc";
        const res = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`);
        const data = await res.json();
        setRecipes(data.hits);
      }
    GetRecipe();
},[getSearch, query])

所以实际上是在做什么数组依赖，正如 React 文档所说，数组依赖用于检查效果是否应该根据它的依赖再次执行，所以在你的代码中你输入的所有东西，getSearch 方法是重新在内存中一次又一次地创建，所以它会检查它使用的最后一个getSearch 函数并将它与新的函数进行比较，所以它会像 fn1 === fn2 一样检查同样的检查器，所以由于这两个函数都是同样，两者在内存中保持不同的空间，所以都是不同的对象，检查这个docs以了解这个概念。

这里你也有反应docs

【讨论】：