React Hook useEffect 错误缺少依赖项

Question

我是 React 的新手，我正在尝试构建一个应用程序，但我收到了这个错误：React Hook useEffect has a missing dependency: 'getRecipes'。要么包含它，要么删除依赖数组。我无法弄清楚如何解决它。任何帮助将不胜感激？

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

当您的 useEffect 调用 getRecipes(); 时，React 表明 getRecipes 是此 useEffect Hook 的依赖项。

你可以用 Effect 更新：

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

你会得到什么

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)

所以你可以更新到：

  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]);

表示会调用这个效果，当query被修改时，表示getRecipes调用query的API。