![](/img/trans.png)
[英]How to use a custom React hook to make a POST or DELETE request with Axios
[英]How to use delete request with axios in react project and Firebase?
我需要删除该元素,但不知道如何获取该特定元素! 这是Firebase上的数据结构
这是代码:
import React, {useState, useEffect} from 'react';
import classes from "./Goal.css";
import Button from "../UI/Button/Button";
import axios from '../../axios-goals'
const Goal = () => {
const [goal, setGoal] = useState({
goals: [],
error: false
});
const deleteGoalHandler = (event) => {
event.preventDefault();
axios.delete("/goals.json")
.then(response => {
console.log(response.data);
})
.catch(error => error => {
setGoal({error: true})
})
}
useEffect(() => {
axios.get('/goals.json')
.then(response => {
const fetchedGoals = [];
for (let key in response.data) {
fetchedGoals.push({
...response.data[key],
id: key
})
}
setGoal({goals: fetchedGoals, error: false})
})
.catch(error => {
setGoal({error: true})
})
}, [])
return (
<div className={classes.MyGoals}>
{goal.goals.map(goal => (
<div key={goal.goalData.goalName} className={classes.Goal}>
<h3>{goal.goalData.goalName}</h3>
<p style={{fontSize: '13px', color: '#cbcbcb'}}>{goal.goalData.commentToGoal}</p>
<div className={classes.GoalDetails}>
<p>{goal.goalData.importance}</p>
<p>{goal.goalData.timer}</p>
</div>
<form>
<Button btnType="Success">DONE</Button>
<Button btnType="Danger" clicked={deleteGoalHandler}>CANCEL</Button>
</form>
</div>
))}
</div>
);
};
export default Goal;
当你按下取消按钮时,选择的元素必须从Firebase中删除。看来我的url是错误的,因为它删除了所有元素。
既然你打电话:
axios.delete("/goals.json")
Firebase 确实是该节点,这意味着它会删除您的所有目标。
如果您希望它删除特定节点,则需要指定该特定节点的路径:
axios.delete("/goals/-MRMLoUzCCLA2A3xRWeb.json")
因此,您需要将点击目标的键从 HTML 传递给deleteGoalHandler
,然后将其传递给数据库目标。 幸运的是,您已经将它存储在每个目标的id
属性中,所以它在 JSX/HTML 中应该是这样的:
clicked={deleteGoalHandler(goal.id)}
当然,您要删除整个文档。 它一定要是:
axios.delete(/goals/${ /goals/${id}.json
);
其中 id 变量已从您的目标变量传递
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.