Question

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

“ React Hook useEffect缺少依赖项：'查询'。要么包含它，要么删除依赖项数组”，每次我在输入框中键入内容时，都会触发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>

Answer 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 docs所说，实际上是在做什么数组依赖关系，它用于检查效果是否应该根据其依赖关系再次执行，因此在代码中，您键入的所有内容getSearch是在内存中一次又一次地重新创建，因此它将检查它所使用的最后一个getSearch函数并将其与新函数进行比较，因此它将像fn1 === fn2一样进行检查，因此函数完全相同，两者都在内存中保留了不同的空间，因此两者都是不同的对象，请检查此docs以了解概念。

您在这里也有反应docs

如何将setState值插入useEffect挂钩？

1 个答案: