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

【问题标题】：How to delete single item from realtime Firebase in react app?如何在反应应用程序中从实时 Firebase 中删除单个项目？
【发布时间】：2022-01-15 09:31:02
【问题描述】：

有人可以帮助我如何在此代码之后使用 remove() 函数从实时数据库中删除单个项目吗？它说'id'没有定义谢谢）

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;

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

为了便于解释，我将从您的代码中删除 handleDeleteExpense 函数，并将其保留为：

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>
    );
};

您在这里看到，唯一引用 id 的地方是在 TiDelete 组件中。最有可能的是，您希望 id 由父组件设置，就像您为 name、priority 和 cost 所做的那样。所以你需要把id改成props.id。

然后在父组件中，您可以使用类似于以下内容的方式添加它：

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

或更短的

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

请务必注意，传递的是快照的密钥，而不是您数据中的 id。如果您使用其他 ID，handleDeleteExpense 将无法使用。

接下来，这行代码将导致您的数据在组件渲染后立即被删除，因为您正在立即调用该函数：

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

应该是：

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

您还导入了一个名为expensesRef 的引用，我假设它已使用firebase.database().child('expenses') 进行了初始化。这意味着您的删除指令也在删除 expenses/expenses/<id> 而不是 expenses/<id>。

【讨论】：