时间戳

首页 > 解决方案 > 使用 React Redux 从 f 中的集合中删除项目

reactjs - 使用 React Redux 从 f 中的集合中删除项目

问题描述

我试图通过引用所选项目的 id 从 Firestore 的集合中删除一个项目。我通过 mapDispatchToProps 成功传递了 id 直到操作，但在尝试通过 delete() 在 Firestore 中删除时停止。我认为问题可能出在我在firestore中删除的方法中，因为它停在那里。谁能告诉我我的代码有什么问题？

import React from 'react'
import { connect } from 'react-redux'
import { firestoreConnect } from "react-redux-firebase";
import { compose } from 'redux'
import { Redirect } from 'react-router-dom'
import moment from 'moment'
import { deleteProject } from '../../store/actions/projectActions'

const handleClick = (e, prop) => {
    e.preventDefault()
    deleteProject(prop)
    console.log(prop)
}

const ProjectDetails = (props) => {
    const { auth, project } = props;
    if (!auth.uid) return <Redirect to='/signin' />
    if (project) {
        return (
        <div className="container section project-details">
            <div className="card z-depth-0">
               // content here
                </div>
                <button onClick={(e) => handleClick(e, props.id)}>Delete</button>
            </div>
        </div>
        )
    } else {
        return (
        <div className="container center">
            <p>Loading...</p>
        </div>
            )
    }

}

const mapStateToProps = (state, ownProps) => {
    const id = ownProps.match.params.id;
    const projects = state.firestore.data.projects;
    const project = projects ? projects[id] : null
    return {
        project: project,
        id: id,
        auth: state.firebase.auth
    }
}
const matchDispatchToProps = (dispatch) => {
    return {
        deleteProject: (id) => dispatch(deleteProject(id))
    }
}

export default compose(
    connect(mapStateToProps, matchDispatchToProps),
    firestoreConnect([
        { collection: 'projects' }
    ])
)(ProjectDetails)

export const deleteProject = (id) => {
  console.log("dispatch", id) \\ successfully shows "dispatch", id
  return(dispatch, getState, {getFirestore}) => {
    const firestore = getFirestore();
    firestore.collection('projects').doc(id).delete()
      .then(() => {
        console.log('deleted') \\ does not show deleted here
        dispatch({ type: 'DELETE_PROJECT_SUCCESS' });
      }).catch(err => {
        dispatch({ type: 'DELETE_PROJECT_ERROR' });
      })
  }
}

标签： reactjsfirebasereact-reduxgoogle-cloud-firestore

解决方案

您正在调用导入的版本deleteProject而不是mapDispatchToProps版本。这是一个常见的问题。

解决此问题的一种方法（并防止它在将来发生）是将您在 mapDispatchToProps 中的操作重命名为不同的名称：

const matchDispatchToProps = (dispatch) => {
    return {
        dispatchDeleteProject: (e, id) => {
            e.preventDefault()
            dispatch(deleteProject(id))
        })
    }
}

然后你可以从你的道具中解构它并调用它：

const ProjectDetails = (props) => {
    const { auth, project, dispatchDeleteProject } = props;
    if (!auth.uid) return <Redirect to='/signin' />
    if (project) {
        return (
        <div className="container section project-details">
            <div className="card z-depth-0">
               // content here
                </div>
                <button onClick={e=>dispatchDeleteProject(e, props.id)}>Delete</button>
            </div>
        </div>
        )
    }

推荐阅读