OnSubmit function 沒有更新 React 中的反應鈎子 state 變量

Question

在這里，我正在嘗試創建一個從名為Edamam的站點獲取其數據的食譜應用程序。 每次用戶單擊提交按鈕時，我都使用 React UseEffect 重新渲染我的頁面。 即更新查詢時頁面將重新呈現。

創建狀態和使用效果

const[recipes,setRecipes]=useState([]);
const[search,setSearch]=useState("");
const[query,setQuery]=useState('chicken');
 useEffect(()=>{
    getRecipes();
 },[query]);

從 API 獲取數據

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.preventDefaut();
  setQuery(search);
  setSearch("");
};

JSX 部分

return(
    <div className="App">
     <form onSubmit={GetSearch} className="search-form">
      <input
       type="text" 
       className="search-bar" 
       value={search} 
       onChange={UpdateSearch}/>
      <button  type="submit" className="search-button" > Search </button>
     </form>
     {query}
     {recipes.map(recipe=>(
       <Recipe/> // a different component
     ))}
    </div>
  )
}

export default App;

Answer 1

嘗試用e.preventDefaut() e.preventDefault()