如何在React中編輯和刪除用戶信息（MongoDB）

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

// defined route in backend
router.delete('/user/delete/:id')

定義的HTTP動詞是delete ，因此，如果要訪問此路由，則需要發送帶有該動詞的HTTP請求。

因此，您的請求將如下所示：

// frontend request
delete() {
  Axios.delete('/user/delete/'+ this.props.match.params.id)
}

要進行更新，它將幾乎相同，請檢查動詞和axios的文檔以獲取與該動詞有關的更多詳細信息。

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);
    }