Question

我正在尝试通过引用所选项目的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' });
      })
  }
}

Answer 1

之所以发生这种情况，是因为未从redux的deleteProject调用您的操作dispatch。

如果您可以正确观察，请在handleClick函数中直接调用deleteProject函数function action。

handleClick函数应从prop这样调用deleteProject函数。

您的handleClick函数应为-

const handleClick = (e, id, deleteProject) => { // passing deleteProject function from prop
    e.preventDefault()
    deleteProject(id)
    console.log(id)
}

您的HTML应该是-

<button onClick={(e) => handleClick(e, props.id, props.deleteProject)}>Delete</button>

Answer 2

您正在调用的是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>
        )
    }

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

2 个答案: