Reactjs 单击按钮时如何更新useEffect挂钩？（如何编写按钮提交方法？）

我正在开发一个API应用程序，当用户输入工作描述或位置时，它将返回一个工作列表。最初，页面将返回所有作业，并在第一次渲染时将其显示在屏幕上（默认为useEffect）。现在我想当用户单击按钮时，页面将根据用户的输入呈现作业列表。我如何在onSubmit函数上这样做，以更新useEffect钩子的值

import React, { useState, useEffect} from 'react';
import SearchForm from './componenets/Form.js';
import JobLists from './componenets/JobLists'
import axios from 'axios'

function App() {
  const [posts, setPosts] = useState([]) //posts store a list of jobs
  const [description, setDescription] = useState('') //description of the job (user's input)
  const [location, setLocation] = useState('') //location of the job (user's input)

  //description input handle
  const handleDescriptionChange = (e) => {
    setDescription(e.target.value);
  }
  
  //location input handle
  const handleLocationChange = (e) => {
    setLocation(e.target.value);
  }

  //submit button handle
  const onSubmit = e => {
    e.preventDefault();
    //once the user enter input and clicks on button, update the the useEffect hooks

  }

  //get data from github job API (fetching by description and location)
  const url = `https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?description=${description}&location=${location}`
  useEffect(() => {
    axios.get(url)
    .then(res =>{
        console.log(res)
        setPosts(res.data)
    })
    .catch(err =>{
        console.log(err)
    })
}, [])

  return (
    <div>
    <SearchForm
        description={description}
        handleDescriptionChange={handleDescriptionChange}
        location={location}
        handleLocationChange={handleLocationChange}
        onSubmit={onSubmit} />
    {
        posts.map((job) => <JobLists job={job} key={job.id} />) //map through each job
    }
    </div>
  )
}
export default App;

import React，{useState，useffect}来自“React”；
从“/componenets/Form.js”导入SearchForm；
从“./componenets/JobLists”导入作业列表
从“axios”导入axios
函数App（）{
const[posts，setPosts]=useState（[]）//posts存储作业列表
const[description，setDescription]=useState（“”）//作业描述（用户输入）
const[location，setLocation]=useState（“”）//作业的位置（用户输入）
//描述输入句柄
const handleDescriptionChange=（e）=>{
setDescription（如目标值）；
}
//位置输入句柄
const handleLocationChange=（e）=>{
设置位置（如目标值）；
}
//提交按钮手柄
const onSubmit=e=>{
e、 预防默认值（）；
//用户输入输入并单击按钮后，更新useEffect挂钩
}
//从github作业API获取数据（按描述和位置获取）
常量url=`https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?description=${description}&location=${location}`
useffect（（）=>{
获取（url）
。然后（res=>{
console.log（res）
设置柱（res.data）
})
.catch（错误=>{
console.log（错误）
})
}, [])
返回(
{
posts.map（（job）=>）//映射每个作业
}
)
}
导出默认应用程序；

import React，{useState，useffect}来自“React”
从“./componenets/Form.js”导入SearchForm
从“./componenets/JobLists”导入作业列表
从“axios”导入axios
常量应用=（）=>{
const[posts，setPosts]=useState（[]）//posts存储作业列表
const[description，setDescription]=useState（“”）//作业描述（用户输入）
const[location，setLocation]=useState（“”）//作业的位置（用户输入）
常量url=`https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?description=${description}&location=${location}`
const getPosts=async（）=>{
等待axios
.get（url）
。然后（（res）=>{
console.log（res）
设置柱（res.data）
})
.catch（（错误）=>{
console.log（错误）
})
}
//从github作业API获取数据（按描述和位置获取）
useffect（（）=>{
getPosts（）
//eslint禁用下一行react HOOK/deps
}, [])
//描述输入句柄
const handleDescriptionChange=（e）=>{
setDescription（如目标值）
}
//位置输入句柄
const handleLocationChange=（e）=>{
设置位置（如目标值）
}
//提交按钮手柄
const onSubmit=（e）=>{
e、 预防默认值（）
//用户输入输入并单击按钮后，更新useEffect挂钩
getPosts（）
}
返回(
{
！！立柱？长度&&
posts.map（（job）=>）//映射每个作业
}
)
}
导出默认应用程序

import React, { useState, useEffect } from 'react'
import SearchForm from './componenets/Form.js'
import JobLists from './componenets/JobLists'
import axios from 'axios'

const App = () => {
  const [posts, setPosts] = useState([]) //posts store a list of jobs
  const [description, setDescription] = useState('') //description of the job (user's input)
  const [location, setLocation] = useState('') //location of the job (user's input)
  const url = `https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?description=${description}&location=${location}`

  const getPosts = async () => {
    await axios
      .get(url)
      .then((res) => {
        console.log(res)
        setPosts(res.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  //get data from github job API (fetching by description and location)
  useEffect(() => {
    getPosts()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  //description input handle
  const handleDescriptionChange = (e) => {
    setDescription(e.target.value)
  }

  //location input handle
  const handleLocationChange = (e) => {
    setLocation(e.target.value)
  }

  //submit button handle
  const onSubmit = (e) => {
    e.preventDefault()
    //once the user enter input and clicks on button, update the the useEffect hooks
    getPosts()
  }

  return (
    <div>
      <SearchForm
        description={description}
        handleDescriptionChange={handleDescriptionChange}
        location={location}
        handleLocationChange={handleLocationChange}
        onSubmit={onSubmit}
      />
      {
        !!posts?.length &&
          posts.map((job) => <JobLists key={job.id} job={job} />) //map through each job
      }
    </div>
  )
}
export default App