使用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();
}