OnSubmit 함수가 반응에서 반응 후크 상태 변수를 업데이트하지 않음

OnSubmit 함수가 반응에서 반응 후크 상태 변수를 업데이트하지 않음

여기서 나는 에다맘이라는 사이트에서 데이터를 가져오는 레시피 앱을 만들려고 한다.사용자가 제출 단추를 누를 때마다 페이지를 다시 렌더링하기 위해 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;

교체 시도e.preventDefaut()와 함께e.preventDefault()

참조URL: https://stackoverflow.com/questions/66311449/the-onsubmit-function-isnt-updating-the-react-hook-state-variable-in-react