Я создаю приложение списка дел React + NodeJS с полным стеком, следуя инструкции. Я создал компонент React Task, который отображает информацию для конкретной задачи и предоставляет кнопки обновления / удаления. По некоторым причинам мои функции React updateTask и deleteTask обновляют / удаляют самую старую задачу независимо от того, какую задачу я выбрал для изменения.
Я использую переменную состояния update в React для переключения формы обновления.
Кроме того, регистрация res в функции updateTask возвращает успех и правильный идентификатор для обновления. Однако это не тот идентификатор, который на самом деле обновляется.
Компонент «Реактивная задача» (Task.js):
import React, { Component } from "react";
import axios from "axios";
class Task extends Component {
constructor({_id, title, due, desc}) {
super();
this.state = {
id: _id,
title: title,
due: due,
desc: desc,
update: false
}
this.updateTask = this.updateTask.bind(this);
this.deleteTask = this.deleteTask.bind(this);
}
updateTask = () => {
const {id, title, due, desc} = this.state;
axios.post("/tasks/update", {
id: id,
update: {
title: title,
due: due,
desc: desc
}
})
.then(
res => {
console.log(res);
console.log(res.data);
}
);
};
deleteTask = () => {
const {id} = this.state;
axios.delete("/tasks/delete", {
id: id
});
};
render() {
const {id, title, due, desc, update} = this.state;
return (
<div className="task">
<div>{id}</div>
{update ?
<div className="task-update">
<input
type="text"
onChange={e => this.setState({ title: e.target.value })}
value={title}
/>
<input
type="date"
onChange={e => this.setState({ due: e.target.value })}
value={!due ? "" : due.slice(0,10)}
/>
<textarea
onChange={e => this.setState({ desc: e.target.value })}
value={!desc ? "" : desc}
/>
<button onClick={this.updateTask}>
Update Task
</button>
</div>
:
<div className="task-show">
<div className="task-info">
<div>{title}</div>
<div>{!due ? "no date" : due.slice(0,10)}</div>
<p>{desc}</p>
</div>
<div className="task-btns">
<button
className="task-edit"
onClick={e => this.setState({update: true})}
>
</button>
<button
className="task-done"
onClick={() => this.doneTask()}
></button>
<button
className="task-del"
onClick={this.deleteTask}
>
</button>
</div>
</div>
}
</div>
);
}
}
export default Task;
Контроллер задач NodeJS:
var express = require('express');
var router = express.Router();
const Task = require("../models/task");
const Data = require("../models/data");
router.get("/all", (req, res) => {
Task.find((err, tasks) => {
if (err) return res.json({ success: false, error: err });
return res.json({ success: true, tasks: tasks });
});
});
router.post("/update", (req, res) => {
const { id, update } = req.body;
Task.findOneAndUpdate(id, update, err => {
if (err) return res.json({ success: false, error: err });
return res.json({ success: true, id: id});
});
});
router.delete("/delete", (req, res) => {
const { id } = req.body;
Task.findOneAndDelete(id, err => {
if (err) return res.send(err);
return res.json({ success: true });
});
});
router.post("/create", (req, res) => {
let task = new Task();
const {title, due, desc} = req.body;
if (!title) {
return res.json({
success: false,
error: "INVALID INPUTS"
});
}
task.title = title;
task.due = due;
task.desc = desc;
task.save(err => {
if (err) return res.json({ success: false, error: err });
return res.json({ success: true });
});
});
module.exports = router;
Заранее спасибо за помощь!