如何在反应应用程序中从实时 Firebase 中删除单个项目？

Question

can someone help me how I can make to delete a single item from realtime database using remove() function following this code? It say's that 'id' is not defined Thanks )

import { expensesRef } from '../firebase';

const ExpenseItem = (props) => {

    const handleDeleteExpense = (id) => {
        
        expensesRef.child(`expenses/` + id).remove();
    };

    return (
        <li class='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span class='badge badge-success mr-3'>{props.priority}</span>
                <span class='badge badge-info mr-3'>{props.cost} Lei</span>
                <TiDelete size='1.5em' onClick={handleDeleteExpense(`${id}`)} />
            </div>
        </li>
    );
};

export default ExpenseItem;

Answer 1

For the sake of explanation, I'm going to remove the handleDeleteExpense function from your code, leaving it with:

const ExpenseItem = (props) => {
    return (
        <li class='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span class='badge badge-success mr-3'>{props.priority}</span>
                <span class='badge badge-info mr-3'>{props.cost} Lei</span>
                <TiDelete size='1.5em' onClick={handleDeleteExpense(`${id}`)} />
            </div>
        </li>
    );
};

You see here that, the only spot referencing id is in the TiDelete component. Most likely, you intended id to be set by the parent component like you are doing for name , priority and cost . So you need to change id to props.id .

Then in the parent component, you'd add it using something similar to:

const { name, priority, cost } = ref.val();
<ExpenseItem
  id=snapshot.key
  name=name
  priority=priority
  cost=cost
/>

or the shorter

<ExpenseItem
  { ...snapshot.val() }
  id=snapshot.key
/>

It's important to note that the snapshot's key, not your id inside your data, is what is being passed through. If you used the other ID, the handleDeleteExpense isn't going to work.

Next, this line, will cause your data to be deleted as soon as your component renders because you are calling the function straight away:

<TiDelete size='1.5em' onClick={handleDeleteExpense(`${id}`)} />

Instead it should be:

<TiDelete size='1.5em' onClick={() => handleDeleteExpense(`${id}`)} />

You also import a reference called expensesRef , which I assume has been initialized with firebase.database().child('expenses') . This means your delete instruction is also deleting expenses/expenses/<id> instead of expenses/<id> .