无法在提交时获取 API 数据

Posted 2023-02-22

【中文标题】无法在提交时获取 API 数据

【英文标题】：Can't fetch API data onSubmit

【发布时间】：2022-01-15 22:15:38

【问题描述】：

我正在使用 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 在每次用户键入时调用。

提前感谢您的帮助：/

【参考方案1】：

我不确定，但我认为删除使用效果的 [handleSubmit] 将解决您的问题。

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

【参考方案2】：

我认为由于您的输入位于 App.js 中的状态内，因此每次更改它时页面都会重新呈现。

尝试将此行移至导航栏：

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

或者，您可以在导航栏中使用 tempInput，并在处理提交后使用 setInput 将 tempInput 发送到您的 App.js。

所以在您的导航栏中，您将拥有：

const [tempInput, setTempInput] = useState('')

当您处理到原始状态时，您需要提供：

setInput(tempInput)