Невозможно удалить элемент, используя ReactJs MongoDB NodeJS - PullRequest
Новая
       83

Невозможно удалить элемент, используя ReactJs MongoDB NodeJS

0 голосов
/ 04 октября 2018

Итак, я работаю с NodeJS, MongoDB и ReactJS.

У меня есть Список задач, куда я добавляю - (Task.create) с помощью mongoose - к своему проекту несколько задач, и у меня есть форма сКнопка, чтобы удалить эти задачи, но я не могу сделать это, потому что я не могу получить доступ к каждому идентификатору задачи, чтобы удалить его.

Вот мой сервер:

(Это неправильно, «задача не определена», но я не знаю, как получить идентификатор каждой задачи) 

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

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

Вот мой (реагирующий) компонент задач 

 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;

enter image description here

Вот изображение моего списка задач, где я могу ДОБАВИТЬ, но не могу УДАЛИТЬ , потому что у меня нет доступа кКаждый идентификатор задачи, нажав на свою собственную кнопку корзины.

Надеюсь, вы можете мне помочь.Большое вам спасибо !!

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Сделайте это, как показано ниже.При выполнении .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

Task.findByIdAndDelete({tasks: req.query.taskId}, (err) =>{
    if(err){
        console.log(err);
    }
 })
};
0 голосов
/ 04 октября 2018

Вам нужно передать идентификатор задачи как findByIdAndDelete(taskId), что совпадает с findByIdAndDelete({'_id': task._id})

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