开发者问题收集

React 中的删除请求

2018-08-13
21433
node.js mongodb reactjs express

我的页面上有一个列表，其中显示了 Mongodb 中集合中的所有注册用户，现在我创建了一个管理面板，我希望能够通过单击按钮来删除用户，但我不知道如何构建这样的功能。

这是呈现用户的组件： 

class UsersList extends React.Component {
constructor(props) {
  super();
  this.state = {
    usersData: []
  };
}


componentDidMount() {
    fetch('http://localhost:3003/api/inlogg').then(function (response) {
      return response.json();
    }).then(function (result) {
      this.setState({
        usersData: result
      });
      }.bind(this))
  }

  render () {
    return this.state.usersData.map(function (user) {
                return <div className="dropdown" key={user._id}>
                  <li>{user.userName}</li>
                  <div className="dropdown-content"><Link to={"/privatchatt/"+user.userName+"/"+sessionStorage.getItem("username")} target="_blank"><p>Starta privatchatt med {user.userName}</p></Link>
                    <button className="delete-btn">Delete</button>
                  </div>
                </div>;
              }
            )
          }
        }

这是我的快速删除路线（它与邮递员一起工作，“用户”也是集合名称） 

    app.delete('/api/users/delete/:id', (req, res, next) => {
  users.deleteOne({ _id: new ObjectID(req.params.id) }, (err, result) => {
    if(err){
      throw err;
    }
    res.send(result)
  });
});

这是我的数据库中的内容： 

{ "_id" : ObjectId("5b6ece24a98bf202508624ac"), "userName" : "admin", "passWord" : "admin" }
{ "_id" : ObjectId("5b6edb95fbbd8420e4dd8d20"), "userName" : "Admin", "passWord" : "Admin" }
{ "_id" : ObjectId("5b6eea7f0becb40d4c832925"), "userName" : "test4", "passWord" : "test4" }

因此，我想创建一个获取删除请求，当我从我的 React 前端按下删除按钮时，该请求就会发出

1个回答

因此，您需要在 render 函数中的 button 上添加一个 onClick 处理程序。然后，在该处理程序中，使用方法 DELETE 向 API 网址发出获取请求。 

handleClick = userId => {
  const requestOptions = {
    method: 'DELETE'
  };

  // Note: I'm using arrow functions inside the `.fetch()` method.
  // This makes it so you don't have to bind component functions like `setState`
  // to the component.
  fetch("/api/users/delete/" + userId, requestOptions).then((response) => {
    return response.json();
  }).then((result) => {
    // do what you want with the response here
  });
}

render () {
    return this.state.usersData.map((user) => {
      return <div className="dropdown" key={user._id}>
        <li>{user.userName}</li>
        <div className="dropdown-content"><Link to={"/privatchatt/"+user.userName+"/"+sessionStorage.getItem("username")} target="_blank"><p>Starta privatchatt med {user.userName}</p></Link>
          <button onClick={() => { this.handleClick(user._id) }} className="delete-btn">Delete</button>
        </div>
      </div>;
    })
  }
}

在大多数情况下，我上面的代码非常标准。在 render 函数中，我对您的按钮元素做了一件非常奇怪的事情。我没有像平常一样传入对 handleClick 的引用。我将其包装在一个函数中（具体来说是一个箭头函数）。这是因为我们想要将一个不是点击事件的参数传递给 handleClick 函数。然后我让 handleClick 将用户 ID 作为参数传入。这是因为我们希望我们定义的函数接受您要删除的用户的 ID。

bwalshy
2018-08-13