如何使用React和Firebase V9执行更新功能?

jhdbpxl9  于 2022-12-24  发布在  React
关注(0)|答案(1)|浏览(154)

我使用firebase的react实时数据库来创建一个CRUD,但是update函数让我非常困惑,原因有二。
1-简单更新一个或多个属性的最正确方法是什么?有时我看到使用update(),其他时间更新单据()其他时候我看到集().作为一个初学者在firebase(我正在尝试的第一个应用程序)我对这么多事情感到迷茫和困惑,更不用说realtimefirestore之间的区别了,我不太明白为什么一个数据库里面有两个数据库(!!?)
2-我正在尝试做污垢,正如我所说的,我没有得到它的工作。它没有给出任何错误的控制台,我仍然得到成功的消息,但数据没有更新无论是在屏幕上还是在数据库中,我不知道我错了哪一部分。什么东西丢失了?代码是:

    • 使用交易. tsx**
async function updateTransaction(transaction: Transaction) {
    await update(ref(realTimeDatabase, `transactions/${transaction.id}`), {
      transactionUpdate
    }).then(() => {
      const updatedTransaction = transactions.map((transaction) => {
        return transaction.id === transactionUpdate?.id ? transactionUpdate : transaction
      });
  
      setTransactions(updatedTransaction)
      toast.success('Atualizada com sucesso')
      console.log('Atualizada no firebase');

    }).catch((err) => {
      toast.error('Ocorreu um erro ao atualizar')
      console.log(err);
    })
  }
    • 更新交易模式. tsx**
async function handleUpdateTransaction(event: FormEvent) {
    event.preventDefault();
    await updateTransaction({
      id,
      title,
      amount,
      category,
      type,
      createdAt: String(new Date()),
    })    
    onRequestClose()
  }

回购协议为:https://github.com/eltonsantos/eurorcamento
更新:

console.log("ID1: " + transactionUpdate?.id) >> undefined
console.log("ID2: " + transaction.id) >> -NJCBBEMVRMymMw-1tjI
5vf7fwbs

5vf7fwbs1#

我设法解决了这个问题,我将在这里分享答案:
我的transactionUpdate状态在这里是不必要的,而且容易混淆,因为新事务已经在updateTransaction函数中使用名称transaction接收,并且不需要状态来检索正在更新的事务的值。
因此,为了解决这个问题,我只是稍微修改了**. map()**,停止使用transactionUpdate变量,并使用通过参数接收的事务。
所以我修正了它,因为有两个变量名为transaction,所以我把map中的变量改为"t",使之不同。
代码如下:

async function updateTransaction(transaction: Transaction) {
    await update(ref(realTimeDatabase, `transactions/${transaction.id}`), {
      title: transaction.title,
      amount: transaction.amount,
      type: transaction.type,
      category: transaction.category
    }).then(() => {
      setTransactions(transactions.map((t) => t.id === transaction.id ? transaction : t ))
      toast.success('Atualizada com sucesso')
      console.log('Atualizada no firebase');

    }).catch((err) => {
      toast.error('Ocorreu um erro ao atualizar')
      console.log(err);
    })
  }

相关问题