使用Firebase Cloud删除React中的数据 [英] Delete data in React using Firebase Cloud

问题描述

我是新的React，今天，我使用React和Firebase来显示，添加和删除数据.我有一些数据获取Firebase并显示在卡中.现在，我要删除一些旺旺卡，但我不知道.你能告诉我怎么做吗?也许在右上角创建"X"按钮，然后单击将其删除.

I'm new React, Today, I using React and Firebase to display, add and delete data. I have some data get Firebase and display in cards. Now, I want delete some want card, but I don't know. You can tell me how do it? Maybe create "X" button in top-right and when click, it deleted.

这是代码调用列表

const ProjectList = ({projects}) => {
  return (
    <div className="project-list section">
      { projects && projects.map(project => {
        return (
          <Link to={'/project/' + project.id} key={project.id}>
            <ProjectSummary project={project} />
          </Link>
        )
      })}  
    </div>
  )
}

这是ProjectSummary

This is ProjectSummary

const ProjectSummary = ({project}) => {
  return (
    <div className="card z-depth-0 project-summary">
      <div className="card-content grey-text text-darken-3">
        <span className="card-title ">{project.title}</span>
        <p>Created by {project.authorFirstName} {project.authorLastName} admin</p>
        <p className="grey-text">{moment(project.createdAt.toDate()).calendar()}</p>
      </div>
    </div>
  )
}

在Firebase中构建数据

And structure data in Firebase

推荐答案

应为:

<button onClick={() => this.removeProject(project.id)}>Delete</button>

   removeProject(id) {
     firebase.delete({ collection: 'project', doc:`${id}` }).then((response) => {
        console.log('delete response', response)
     }).catch((error) => {
       console.log('delete error', error)
    })
  }

这篇关于使用Firebase Cloud删除React中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！