Node.js 在React中删除请求
我的页面上有一个列表,显示Mongodb集合中的所有注册用户,现在我已经创建了一个管理面板,我希望能够通过单击按钮删除用户,但我不知道如何构造这样一个函数 这是呈现用户的组件:Node.js 在React中删除请求,node.js,mongodb,reactjs,express,Node.js,Mongodb,Reactjs,Express,我的页面上有一个列表,显示Mongodb集合中的所有注册用户,现在我已经创建了一个管理面板,我希望能够通过单击按钮删除用户,但我不知道如何构造这样一个函数 这是呈现用户的组件: class UsersList extends React.Component { constructor(props) { super(); this.state = { usersData: [] }; } componentDidMount() { fetch('http://loc
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>;
}
)
}
}
这是我的数据库中的内容:
{ "_id" : ObjectId("5b6ece24a98bf202508624ac"), "userName" : "admin", "passWord" : "admin" }
{ "_id" : ObjectId("5b6edb95fbbd8420e4dd8d20"), "userName" : "Admin", "passWord" : "Admin" }
{ "_id" : ObjectId("5b6eea7f0becb40d4c832925"), "userName" : "test4", "passWord" : "test4" }
因此,我想创建一个fetch delete请求,当我从React前端按下delete按钮时,该请求就会发出,因此您需要在渲染函数中的
按钮上使用onClick处理程序。然后在该处理程序中,使用方法DELETE
对API url发出获取请求
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>;
})
}
}
handleClick=userId=>{
常量请求选项={
方法:“删除”
};
//注意:我在“.fetch()”方法中使用了箭头函数。
//这使得您不必绑定像`setState'这样的组件函数`
//连接到组件。
fetch(“/api/users/delete/”+userId,requestOptions)。然后((响应)=>{
返回response.json();
})。然后((结果)=>{
//对此处的响应执行所需操作
});
}
渲染(){
返回此.state.usersData.map((用户)=>{
返回
{user.userName}
Starta privatchatt med{user.userName}
{this.handleClick(user.\u id)}className=“delete btn”>删除
;
})
}
}
在大多数情况下,我上面的代码是相当标准的。在渲染函数中,我对你的按钮元素做了一件非常不可靠的事情。我并没有像你通常会做的那样,只是传递了对handleClick
的引用。我把它包装在一个函数中(特别是箭头函数)。这是因为我们希望将不是单击事件的参数传递给handleClick
函数。然后我让handleClick
传入用户id作为参数。这是因为我们希望我们定义的函数接受您要删除的用户的ID。嘿,B非常感谢…我一直在努力实现删除功能..根据您的答案。我找到了解决方案。
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>;
})
}
}