第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Hook useEffect Error missing dependency

React Hook useEffect Error missing dependency

慕碼人2483693 2022-08-27 15:15:43
我對 React 很陌生,我正在嘗試構建一個應用程序,但是我得到了這個錯誤:React Hook useEffect 缺少一個依賴項:'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>  )}
查看完整描述

1 回答

?
月關寶盒

TA貢獻1772條經驗 獲得超5個贊

當你調用 React 時,它表明這是對這個 useEffect Hook 的依賴。useEffectgetRecipes();getRecipes


您可以使用效果進行更新:


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

這表示在修改時將調用此效果,這意味著 getRecipes 使用 調用 API。queryquery


查看完整回答
反對 回復 2022-08-27
  • 1 回答
  • 0 關注
  • 218 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號