无法在提交时获取 API 数据答案

【问题标题】：Can't fetch API data onSubmit无法在提交时获取 API 数据
【发布时间】：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 在每次用户键入时调用。

提前感谢您的帮助：/

【问题讨论】：

标签： javascript reactjs api react-hooks react-props

【解决方案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)

【讨论】：