单击按钮时如何更新 useEffect 挂钩? (按钮的提交方法怎么写?)
How do I update useEffect hook when clicked on a button? (how to write the button submit method?)
我正在开发一个 API 应用程序,当用户输入职位描述或位置时,该应用程序将 return 一个职位列表。最初,该页面将 return 所有作业并在第一次渲染时将它们显示到屏幕上(默认 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;
https://codesandbox.io/s/react-form-example-gm9o6
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
我正在开发一个 API 应用程序,当用户输入职位描述或位置时,该应用程序将 return 一个职位列表。最初,该页面将 return 所有作业并在第一次渲染时将它们显示到屏幕上(默认 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;
https://codesandbox.io/s/react-form-example-gm9o6
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