使用Firebase Cloud删除React中的数据

Question

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

这是代码调用列表

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

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中构建数据

Answer 1

您可以像这样在ProjectSummary列表项中添加一个用于删除的按钮

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

Id将是firebase的唯一键，例如ahakhka734hfakh3

然后在回调中，我们可以调用firebase.database（）的remove方法，该方法将其从页面中剥离出来。

removeProject(projectId) {
  const projectRef= firebase.database().ref(`/projects/${projectId}`);
  projectRef.remove();
}

Answer 2

应为：

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