Question

我正在使用react和redux，在花了几个小时解决这个问题之后，我仍然无法使用react和redux在firebase中删除文档。

我在仪表板上显示项目摘要，然后尝试添加删除按钮。单击按钮后，项目将传递到我要删除项目的projectActions.js操作。此后，我想将类型发送到projectReducer.js。单击按钮后，返回后我没有收到错误，也无法输出任何console.log。我确实将项目数据放入removeProject函数中。

我试图在removeProject（）中删除return方法，并在console.log中传递通过的项目。我可以获取project.id并将其添加到firestore.collection.delete（）函数中。但是由于返回后没有任何效果，所以这是不可能的。

ProjectSummary.js：

import React, { Component } from 'react'
import moment from 'moment'
import { connect } from 'react-redux'
import { removeProject } from '../../store/actions/projectActions'
import { Link } from 'react-router-dom'

class ProjectSummary extends Component {
  state = {
    project: this.props.project
  }

  handleRemove = (e) => {
    e.preventDefault()
    removeProject(this.state.project)
  }

  render() {
    const { project }  = this.props
    return (
      <div className="card z-depth-0 project-summary">
        <div className="card-content grey-text text-darken-3">
        <Link key={project.id} to={'/project/' + project.id}>
          <span className="card-title">{project.title}</span>
        </Link>
        <p>Posted by {project.authorFirstName} {project.authorLastName}</p>
        <p className="grey-text">{moment(project.createdAt.toDate()).calendar()}</p>
          <a className="waves-effect waves-light btn" onClick={this.handleRemove}>Remove</a>
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) =>  {
  return {
    removeProject: (project) => dispatch(removeProject(project))
  }
}

export default connect(null, mapDispatchToProps)(ProjectSummary)

projectActions.js：

export const removeProject = (project) => {
  return (dispatch, getState, { getFirestore }) => {
    const firestore = getFirestore()

    firestore.collection('projects').doc(project).delete()
    .then(() => {
      dispatch({ type: 'REMOVE_PROJECT' })
  }).catch(function(err) {
      dispatch({ type: 'REMOVE_PROJECT_ERROR', err})
    });
  }
}

projectReducer.js：

const projectReducer = (state = initState, action) => {
  switch (action.type) {
    case 'CREATE_PROJECT':
      console.log("Created Project", action.project)
      return state
    case 'CREATE_PROJECT_ERROR':
      console.log('create project error', action.err)
      return state
    case 'REMOVE_PROJECT':
      console.log('Removed Project')
      return state
    case 'REMOVE_PROJECT_ERROR':
      console.log('Removed Project Error', action.err)
      return state

    default:
      return state
  }
}

Answer 1

穿上它：

ProjectSummary.js

    (…)
        import { removeProject } from '../../store/actions/projectActions' 
        import { connect } from 'react-redux';
        (…)
        class ProjectSummary extends Component {
        state = {
          project: this.props.project
        } 
        render() {
        const { project, deleteProject}  = this.props 
        (…) 

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

        (…)

            const mapDispatchToProps = (dispatch) => {
              return {
               removeProject: (id) => { dispatch(removeProject(id))},
              }
             }
        export default connect(null, mapDispatchToProps)(ProjectSummary)

然后 projectActions.js

(…)
export const removeProject = (id) => {
    return (dispatch, getState, { getFirestore }) => {
    const firestore = getFirestore()
    firestore.collection('projects').doc(id).delete();
    }
  }

使用Redux和React时无法从Firebase集合中删除数据（doc）

1 个答案: