javascript - 执行函数后重新调用反应钩子
问题描述
我是反应钩子的新手,我有一个钩子函数,它从 API 接收一系列数据以显示在列表中:
function useJobs () {
const [jobs, setJobs] = React.useState([])
const [locations, setLocations] = React.useState({})
const [departments, setDepartments] = React.useState({})
const [tags, setTags] = React.useState({})
React.useEffect(() => {
fetchJSON('/api/jobs/list-jobs', { headers: headers })
.then(setJobs)
}, [])
React.useEffect(() => {
....
return [jobs, locations, departments, tags]
}
我还有另一个功能可以在按下按钮时删除作业:
function DeleteJob (jobid) {
console.log('deletejob fired')
console.log(jobid)
axios({
method: 'delete',
url: '/api/jobs/delete-job/' + jobid,
headers: headers
})
}
...
export default function Jobs () {
const classes = useStyles()
const [jobs, locations, departments, tags] = useJobs()
return (
...
{jobs.map(job => (
......
<IconButton aria-label='delete' style={{ color: 'red' }} variant='outlined' onClick={() => DeleteJob(job.id)}>
<DeleteIcon />
</IconButton>
问题是 DeleteJob 函数执行正确,我的作业被删除,但我的屏幕没有实时更新,需要刷新才能显示新数据。useJob()
执行 DeleteJob 函数后,如何让我的钩子接收新数据(作业)?
解决方案
您的 DeleteJobs 函数还需要从状态中删除作业值,因为您的服务器数据仅在初始渲染时获取。为此,您可以从自定义钩子中公开一个方法并在调用时使用它DeleteJobs
function useJobs () {
const [jobs, setJobs] = React.useState([])
const [locations, setLocations] = React.useState({})
const [departments, setDepartments] = React.useState({})
const [tags, setTags] = React.useState({})
const deleteJob = (id) => { // function that removes job from state
setJobs(prevJobs => prevJobs.filter(job => job.id !== id));
}
React.useEffect(() => {
fetchJSON('/api/jobs/list-jobs', { headers: headers })
.then(setJobs)
}, [])
....
return [jobs, locations, departments, tags,deleteJob]
}
function DeleteJob (jobid) {
console.log('deletejob fired')
console.log(jobid)
axios({
method: 'delete',
url: '/api/jobs/delete-job/' + jobid,
headers: headers
})
}
export default function Jobs () {
const classes = useStyles()
const [jobs, locations, departments, tags, deleteJob] = useJobs()
return (
...
{jobs.map(job => (
......
<IconButton
aria-label='delete'
style={{ color: 'red' }}
variant='outlined'
onClick={() => {
DeleteJob(job.id);
deleteJob(job.id); // locally delete from state
}}
>
<DeleteIcon />
</IconButton>
...
)
}
推荐阅读
- ruby-on-rails - Rails: `require': 无法加载此类文件 -- sqlite3/sqlite3_native (LoadError)
- flutter - 颤振错误:断言失败:第 1785 行 pos 12:'hasSize'
- pycharm - PyCharm 安全删除功能
- python - 使用 64 位训练的 Scikits-Learn RandonForest 并在 64 位 PyCharm 中打开时出错
- swift - 如何在保持 LiDAR 调试网格的同时禁用摄像头馈送?
- c - 多个目标但相同的依赖项
- python - Python Pandas - 将 2D df 转换为 3D
- java - java中将JSON数组字符串转换为列表的通用方法
- amazon-web-services - 用于 prod 的 k8s 高可用性配置边缘案例
- r - r:在特定条件下将日期添加到日期变量