获取调用触发 onChange 而不是 onSubmit

Posted 2023-02-22

【中文标题】获取调用触发 onChange 而不是 onSubmit

【英文标题】：fetch call firing onChange rather than onSubmit

【发布时间】：2022-01-16 00:46:46

【问题描述】：

我正在使用 React 构建一个食谱搜索页面。有两个组件 - 导航栏和主页。 Navbar 接收搜索查询，Home 呈现数据。

API 调用工作正常，配方根据需要呈现。我遇到的问题是，每当用户在搜索栏中输入任何内容时，我的 fetch 调用都会触发 - 但我需要仅在按下提交按钮时触发请求。

代码如下：（我使用 App.js 作为两个组件之间的中介，因为它们是兄弟姐妹）

导航栏

function Navbar( setInput, handleSubmit ) 

  return (
  // Step 1 - User inputs query
     <form onSubmit=handleSubmit>
       <input onChange=(e) => setInput(e.target.value) />
       <button type="submit">SUBMIT</button>
     </form>
  )

APP.JS

function App() 
  const [input, setInput] = useState('')

  const handleSubmit = (e) => 
    e.preventDefault()
    navigate('/home')
  ;

  return (
  // Step 2 - App handles exchange
    <Navbar setInput=setInput handleSubmit=handleSubmit />
    <Home input=input handleSubmit=handleSubmit />
  )

首页

function Home( input, handleSubmit ) 

useEffect(() => 
        axios.get(`www.recipeAPI/$input`)
        .then(res => //render recipes with res)
    , [handleSubmit]);


  return (
    // Step 3 - fetch call data gets rendered
  )

我尝试了各种钩子和侦听器，但似乎没有什么能阻止 API 在每次用户键入时调用。

提前感谢您的帮助：/

【问题讨论】：

在 useEffect 捕获中使用函数 handleSubmit 本身似乎很奇怪。你能用minimal reproducible example 填写评论存根吗？目前还不清楚为什么Home 需要使用那个效果或者为什么 axios 调用需要在其中。

每当您更新状态时，handleSubmit 函数都会初始化，因为它是 useEffect 的依赖项，在每次状态更改（即输入）时向 axios 发出请求。将 [handleSubmit] 替换为 []

在Home组件中，尝试从useEffect的依赖数组中移除handleSubmit

【参考方案1】：

每当App 被重新渲染时，例如声明input 状态，您重新创建handleSubmit 函数。由于 handleSubmit 函数是 home 中 useEffect 的依赖项，因此它会对更改做出反应，并发出调用。

为了防止将 handleSubmit 与 useCallback 包装起来，这将记住函数，并防止在每次重新渲染时生成新函数。

function App() 
  const [input, setInput] = useState('')

  const handleSubmit = useCallback((e) => 
    e.preventDefault()
    navigate('/home')
  , []);

  return (
  // Step 2 - App handles exchange
    <Navbar setInput=setInput handleSubmit=handleSubmit />
    <Home input=input handleSubmit=handleSubmit />
  )

【参考方案2】：

我最终做的是将整个 fetch 调用移至 App.js 并将结果传递给 home。解决了这个问题