React Hook useEffect 错误缺少依赖项

Question

I'm very new to React and I'm trying to build an app, but I'm getting this error: React Hook useEffect has a missing dependency: 'getRecipes'. Either include it or remove the dependency array. I cannot figure out how to fix it. Any help would be appreciated?

 useEffect( () => { getRecipes(); }, [query]); const getRecipes = async () => { const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`); const data = await response.json(); setRecipes(data.hits); console.log(data.hits); } const updateSearch = e => { setSearch(e.target.value); } const getSearch = e => { e.preventDefault(); setQuery(search) } return( <div className="App"> <form onSubmit={getSearch}className="container"> <input className="mt-4 form-control" type="text" value={search} onChange={updateSearch}/> <button className="mt-4 mb-4 btn btn-primary form-control" type="submit">Search</button> </form> <div className="recipes"> {recipes.map(recipe => ( <Recipe key={recipe.label} title={recipe.recipe.label} image={recipe.recipe.image} ingredients={recipe.recipe.ingredients}calories={recipe.recipe.calories} /> ))} </div> </div> ) }

Answer 1

As your useEffect calls getRecipes(); React is indicating that getRecipes is a dependency on this useEffect Hook.

You could update with Effect with:

useEffect(() => {
    getRecipes();
}, [query, getRecipes]);

However you will get

The 'getRecipes' function makes the dependencies of useEffect Hook (at line 18) change on every render. Move it inside the useEffect callback. Alternatively, wrap the 'getRecipes' definition into its own useCallback() Hook. (react-hooks/exhaustive-deps)

So you can update to:

  useEffect(() => {
    const getRecipes = async () => {
      const response = await fetch(
        `https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`
      );
      const data = await response.json();
      setRecipes(data.hits);
      console.log(data.hits);
    };

    getRecipes();
  }, [query]);

Which indicates this effect will be called, when query is modified, which means getRecipes call the API with query .