我试图用.map()创建一个列表,但是当我试图在后端控制用户._id时,它显示了所有的id,但是我不想这样,我想用.map()通过一个按钮单独删除每个帖子。每个包含姓名、年龄和电子邮件的帖子都有一个按钮,我需要用它来删除当前的数据。
下面是我的代码:
import React from "react"
import axios from "axios"
import { useState, useEffect } from "react"
import { Link } from "react-router-dom"
const deletePost = (userid) => {
axios.post('http://localhost:3001/deleteUser', {_id: userid})
}
function userlist() {
const [listOfUsers, setListOfUsers] = useState([])
useEffect(() => {
axios.get('http://localhost:3001/userlist').then((response) => {
setListOfUsers(response.data)
})
})
return (
<div className="userlistdiv">
{listOfUsers.map((user) => {
return (
<div className="userdiv">
<h1>Id: {user._id}</h1>
<h1>Name: {user.name}</h1>
<h1>Age: {user.age}</h1>
<h1>E-mail: {user.email}</h1>
<button onClick={deletePost(user._id)}>Delete</button>
<hr></hr>
</div>
)
} )}
</div>
)
}
export default userlist;
下面是我尝试使用console.log查看发生了什么的代码:
const express = require('express');
const app = express();
const PORT = 3001;
const mongo = require('./mongo')
const usersModel = require('./models/userschema')
const cors = require('cors')
app.use(express.json())
app.use(cors())
app.get('/userlist', (req, res) => {
usersModel.users.find({}).then((result, err) => {
if(err) {
res.json(err)
}
else {
res.json(result)
}
})
})
app.post('/deleteUser', (req, res) => {
console.log(req.body._id)
usersModel.users.findOneAndDelete({_id: req.body._id})
})
app.post('/createUser', (req, res) => {
const newUser = usersModel.users({name: req.body.name, age: req.body.age, email: req.body.email})
newUser.save()
})
app.listen(PORT, () => {
console.log('Servidor rodando na porta ' + PORT);
})
我在后端使用这个“console.log”来查看前端发送到后端的结果是什么,它显示了所有的_id,我想这是因为我使用了.map(),那么,我如何解决这个问题,只返回我想使用按钮删除的帖子的_id?
2条答案
按热度按时间jmo0nnb31#
这应该是在单击按钮时调用函数的正确方式
mhd8tkvw2#
下面的代码在函数呈现时立即调用
deletePost(user._id)
。您要做的是将回调函数传递给
onClick
以执行:这样,您就允许
button
在单击按钮时 * 调用该函数 *。