Блог

Главная - Вопросы по программированию - Как использовать запрос на удаление с помощью axios в проекте react и Firebase?

Как использовать запрос на удаление с помощью axios в проекте react и Firebase?

#javascript #reactjs #firebase #firebase-realtime-database #axios

#javascript #reactjs #firebase #firebase-база данных в реальном времени #axios

Вопрос:

Мне нужно удалить элемент, но я не знаю, как получить этот конкретный элемент! Это структура данных в 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 неверен, потому что он удаляет все элементы.

Ответ №1:

Поскольку вы вызываете:

 axios.delete("/goals.json")

Firebase действительно удалит этот узел, что означает, что он удаляет все ваши цели.

Если вы хотите, чтобы он удалил определенный узел, вам нужно будет указать путь к этому конкретному узлу:

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

Итак, вам нужно будет передать ключ выбранной цели в deleteGoalHandler из HTML, а затем передать его цели базы данных. К счастью, вы уже храните его в id свойстве для каждой цели, поэтому в JSX / HTML должно быть что-то вроде этого:

 clicked={deleteGoalHandler(goal.id)}

Комментарии:

1. Не удалит ли он только первый элемент, потому что мне нужно удалить выбранный?

2. delete Вызов в моем ответе является примером того, как будет выглядеть возврат первого узла в вашем JSON. JSX в моих примерах передается goal.id , и затем вам нужно передать его в URL в REST API.

3. Привет, @Max. Вы добились какого-либо прогресса в этом?

Ответ №2:

конечно, вы удаляете весь документ. Это должно быть:

axios.удалить ( /goals/${id}.json );

где переменная id была передана из вашей переменной goals

Метки: