Can't fetch API data onSubmit-CodePudding

I'm building a recipe search page with React. There are two components - Navbar and Home. The Navbar takes in the search query and the Home renders the data.

The API call works fine and the recipes render as needed. The issue I'm having is whenever the user types anything in the search bar, my fetch call fires - but I need the request to fire only when the submit button is pressed.

Here's the code: (I'm using App.js as the intermediary between the two components because they're siblings)

NAVBAR

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} />
  )
}

HOME

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
  )
}

I've tried all kinds of hooks and listeners but nothing seems to stop the API from calling everytime a user types.

I appreciate the help in advance :/

CodePudding user response：

I think that due to the fact your input is inside a state in App.js, every time you change it the page rerender.

Try to move this line

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

To Navbar

Alternatively, you can use tempInput in your Navbar, and send the tempInput to your App.js with setInput once you handle the submit

So in your Navbar you will have

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

And when you handle to original state you need to provide

setInput(tempInput)

CodePudding user response：

I am not sure, but I think removing the [handleSubmit] of the use effect will fix your issue.

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