开发者问题收集

无法使用 ReactJs MongoDB NodeJS 删除项目

2018-10-04
2558

所以我正在使用 NodeJS、MongoDB 和 ReactJS。

我有一个任务列表,其中我使用 mongoose 将 -(Task.create) 添加到我的项目中的多个任务,并且我有一个带有按钮的表单来删除这些任务,但我无法执行此操作,因为我无法访问每个任务 ID 来删除它。

这是我的服务器:

(这是错误的,“任务未定义”但我不知道如何获取每个任务 ID)

exports.delete_task= (req, res) => {

Task.findByIdAndDelete({tasks: task._id}, (err) =>{
    if(err){
        console.log(err);
    }
 })
};  

这是我的(reactjs)任务组件

 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrashAlt, faEdit } from '@fortawesome/free-solid-svg-icons'

 import './Tasks.css';

 class Tasks extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projectId: props._id,
            tasks: []
        };
    }

 componentDidMount() {
    fetch(`/dashboard/project/${this.props.projectId}/tasks`)
        .then(response => {
            return response.json()
        }).then(task => {
            this.setState({
                tasks: task.tasks
            })
        }).catch(error => console.error('Error:', error));
 }

 render() {

    const { tasks } = this.state;
    return (
        <div>
                <ul className="task-list">
                {tasks.map(task =>
                <li key={task._id}>{task.tasktitle} 

               <div>

              <form method='POST' action={`/dashboard/project/${this.props.projectId}/tasks/delete?_method=DELETE`}>
                 <button className="btn button--tasks" >
                    <FontAwesomeIcon icon={faTrashAlt} />
                 </button>
                </form>
                   </div>
                     </li>
                )}
                </ul>        
      </div>  
    );
  }
}

export default Tasks;

在此处输入图片描述

这是我的任务列表的图片,我可以添加但 不能删除 它,因为我无法通过点击其自己的垃圾桶按钮来访问每个任务 ID。

希望你能帮助我。非常感谢!!

2个回答

按如下方式操作。执行 .map 时将 task._id 作为查询参数传递到路径,如下所示

{tasks.map(task =>
                <li key={task._id}>{task.tasktitle} 

               <div>

              <form method='POST' action={`/dashboard/project/${this.props.projectId}/tasks/delete?_method=DELETE&taskId=${task._id}`}>
                 <button className="btn button--tasks" >
                    <FontAwesomeIcon icon={faTrashAlt} />
                 </button>
                </form>
                   </div>
                     </li>
                )}


exports.delete_task= (req, res) => {

这里使用 req.query.taskId 获取任务 ID

Task.findByIdAndDelete({tasks: req.query.taskId}, (err) =>{
    if(err){
        console.log(err);
    }
 })
};
Hemadri Dasari
2018-10-04

您需要传递任务 ID,如 findByIdAndDelete(taskId) ,它与 findByIdAndDelete({'_id': task._id}) 相同>

Task.findByIdAndDelete(task._id, (err) =>{
    if(err){
        console.log(err);
    }
 })
};
Shivam Pandey
2018-10-04