Question

我是React和JavaScript的初学者，所以我现在在编程方面很糟糕。

我想做的是当我按下一个按钮时在Mongodb中编辑和删除项目。我正在使用Axios连接到网络，不知道现在该怎么办以及为什么会发生错误。

我已经执行了更新和删除功能，但是它不起作用。我将非常感谢我给予的任何帮助。谢谢!!!

我创建了一个用于删除功能的路由器，但不知道要制作一个用于编辑功能的路由器。

这是编辑功能


Myprofile.js

class Modify extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };
  }

update() {
 Axios.get('/users', {
      params: {
        id: 1
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
    });
}

<Button color="primary" onClick={this.update}>EDIT</Button>

这是删除功能


class Delete extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        modal: false
      };

    }

    delete() {
      Axios.get('/user/delete/'+ this.props.match.params.id, {
        params: { 
           id: this.state.data.userid,

        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
      });
      console.log(this.props.data);
    }


 <Button color="danger" onClick={this.delete}>DELETE</Button>

这是router.js


router.js


router.delete('/user/delete/:id', (req, res, next) => {
        const _id = req.params.id;
        Users.deleteOne({ _id }, (err, result) => {
            console.log(result);
            req.session.destroy(() => {
                req.session;
                delete res.locals.user;
            });
            res.status(200).redirect('/');
        });
    })


this is my data

{ "_id" : ObjectId("5d648f5e87cb3a1290079c96"), "wishlist" : [ ], "userid" : "123", "password" : "qSx9s1dqN6KRmobPHCn7nODwq42DnfpN6TUmPu8Rzi9VEfYqMzYrK6wT5ATRtvOn9saLcdNpMWtM7kgyXI8/Edj5lZ5XWqXfM4YYTWl8rHHa1QFg8KStd2rTNy0r/ujXAj1YreVRmVtV3pSj/Ey2Jmvf0cwcgvaapQ82vmbbKOc=", "salt" : "sKzE2Fg+fGODHScoZ/r+f6SUafSz5gfB23c1gQcuoBqEpZ/abuMluB5HaNYKl9hMRrv9Y8LdhfiUxcXR6BJWxg==", "email" : "123@gmail.com", "createdAt" : ISODate("2019-08-27T02:03:10.681Z"), "__v" : 0 }

我想在按EDIT按钮时更新用户信息，并在按DELETE时删除MongoDB中的用户信息。

我从删除函数中得到的结果是““ TypeError：无法读取未定义的属性'match'”

Answer 1

问题在于请求方法：您的路由器希望使用DELETE user/delete/:id，但是您尝试使用GET。将Axios.get更改为Axios.delete

要进行编辑，通常使用PUT方法

Answer 2

x.dept

定义的HTTP动词为// defined route in backend router.delete('/user/delete/:id')，因此，如果要访问此路由，则需要发送带有该动词的HTTP请求。

因此您的请求将如下所示：

delete

要进行更新，它几乎是相同的，请检查动词和axios' docs以获得与该动词有关的更多详细信息。

Answer 3

对此使用箭头功能以获取this上下文

    delete = () => {
      Axios.get('/user/delete/'+ this.props.match.params.id, {
        params: { 
           id: this.state.data.userid,

        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
      });
      console.log(this.props.data);
    }

如何在React中编辑和删除用户信息（MongoDB）

3 个答案: