如何向 React 应用程序添加删除按钮功能

Question

我是 React 新手，在添加从数据库中删除项目的方法时遇到问题。我一直在尝试很多不同的东西，但这就是我目前所处的位置。

目前，我正在尝试使用一个函数

function DeleteBtn(props) {
  return (
    <span className="delete-btn" {...props} role="button" tabIndex="0">
      Delete
    </span>
  );
}

结合按钮本身

<DeleteBtn onClick={() => this.deleteMusic(props.music._id)} />

并尝试在我的后端 server.js 文件中添加删除路由，但截至目前，我已经创建了一个单独的组件，我正在尝试向其中添加删除功能。这是整个文件：

import axios from 'axios';

export default {
    deleteMusic: function(id) {
        return axios.delete('/pieces/' + id);
    }
};

我很肯定有更好的方法可以做到这一点，但我被困住了，很难在其他帖子中找到答案。

我目前遇到的错误是 onClick 函数中的 TypeError。 "无法读取未定义的属性 'deleteMusic'。

任何帮助将不胜感激！

编辑：至于数据库，我将 MongoDB 与 Mongoose 一起使用。

在后端的 server.js 中，我尝试了几种不同版本的 Mongoose .remove，以手头条目的 id 为目标。我还尝试了几种不同的方法来删除组件本身中的条目，并结合后端的路由，所有成功率为零。

编辑：后端 server.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const musicRoutes = express.Router();
const PORT = 4000;

let Music = require('./music.model');

app.use(cors());
app.use(bodyParser.json());

mongoose.connect('mongodb://127.0.0.1:27017/music', { useNewUrlParser: true });
const connection = mongoose.connection;

connection.once('open', function() {
    console.log('MongoDB database connection established successfully');
});

musicRoutes.route('/').get(function(req, res) {
    Music.find(function(err, pieces) {
        if (err) {
            console.log(err);
        } else {
            res.json(pieces);
        }
    });
});

musicRoutes.route('/:id').get(function(req, res) {
    let id = req.params.id;
    Music.findById(id, function(err, music) {
        res.json(music);
    });
});

musicRoutes.route('/update/:id').post(function(req, res) {
    Music.findById(req.params.id, function(err, music) {
        if (!music) res.status(404).send('data is not found');
        else 
        music.music_description = req.body.music_description;
        music.music_composer = req.body.music_composer;
        music.music_class = req.body.music_class;
        music.music_title = req.body.music_title;

        music.save()
            .then(music => {
                res.json('Music updated!');
            })
            .catch(err => {
                res.status(400).send('Update not possible');
            });
    });
});

musicRoutes.route('/add').post(function(req, res) {
    let music = new Music(req.body);
    music.save()
        .then(music => {
            res.status(200).json({ music: 'New music added successfully' });
        })
        .catch(err => {
            res.status(400).send('Adding new music failed');    
        });
});

musicRoutes.route('/delete').delete(function(req, res) {
    let id = req.params.id;
    Music.findByIdAndRemove(id).exec();
    res.redirect('/');
});

app.use('/pieces', musicRoutes);

app.listen(PORT, function() {
    console.log('Server is running on Port: ' + PORT);
});

Answer 1

你能定义如下所示的DeleteButton组件吗？

const API_URL = 'https://yourserverurl';

const DeleteButton = ({ id }) => (
  <span
    className="delete-btn"
    role="button"
    tabIndex="0"
    onClick={() => axios.delete(`${API_URL}/pieces/${id}`)}
  >
    Delete
  </span>
);

你可以像这样使用它。

Answer 2

您正在使用 delete 作为路由，并且该路由上没有 id 参数。 所以

musicRoutes.route('/delete').delete(function(req, res) {
    let id = req.params.id;
    Music.findByIdAndRemove(id).exec();
    res.redirect('/');
});

应该，要么是

musicRoutes.route('/delete/:id').delete(function(req, res) {
    let id = req.params.id;
    Music.findByIdAndRemove(id).exec();
    res.redirect('/');
});

你应该打电话

export default {
    deleteMusic: function(id) {
        return axios.delete('/pieces/delete' + id);
    }
};

或者，你应该从你的路线中删除删除

musicRoutes.route('/:id').delete(function(req, res) {
    let id = req.params.id;
    Music.findByIdAndRemove(id).exec();
    res.redirect('/');
});