如何将 setState 值插入 useEffect 挂钩？

Posted 2023-02-22

【中文标题】如何将 setState 值插入 useEffect 挂钩？

【英文标题】：How to insert setState value into useEffect hook?

【发布时间】：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> 

【参考方案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