OnSubmit 函数不会更新 React 中的反应钩子状态变量

Posted 2023-02-22

【中文标题】OnSubmit 函数不会更新 React 中的反应钩子状态变量

【英文标题】：The OnSubmit function isnt updating the react hook state variable in React

【发布时间】：2021-05-24 10:39:58

【问题描述】：

在这里，我正在尝试创建一个食谱应用程序，该应用程序从名为 Edamam 的站点获取其数据。 每次用户单击提交按钮时，我都使用 React UseEffect 重新渲染我的页面。 即，当 query 更新时，页面将重新呈现。

状态的创建和使用效果

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;

【问题讨论】：

将getRecipes 函数移到useEffect 内部是否有效？

【参考方案1】：

尝试用e.preventDefault()替换e.preventDefaut()