如何在反应项目和 Firebase 中使用带有 axios 的删除请求？

Question

我需要删除元素但不知道如何获取该特定元素！ 这是 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 中删除所选元素。看来我的网址是错误的，因为它删除了所有元素。

Answer 1

既然你来电：

axios.delete("/goals.json")

Firebase 确实会那个节点，这意味着它会删除你的所有目标。

如果要删除特定节点，则需要指定该特定节点的路径：

axios.delete("/goals/-MRMLoUzCCLA2A3xRWeb.json")

因此，您需要将点击目标的键从 HTML 传递给 deleteGoalHandler，然后将其传递给数据库目标。幸运的是，您已经将它存储在每个目标的 id 属性中，所以它在 J​​SX/HTML 中应该是这样的：

clicked={deleteGoalHandler(goal.id)}