mongoose 如何使用react和axios删除数据?

lymgl2op  于 2022-11-13  发布在  Go
关注(0)|答案(2)|浏览(165)

我试图用.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?

jmo0nnb3

jmo0nnb31#

<button onClick={() => deletePost(user._id)}>Delete</button>

这应该是在单击按钮时调用函数的正确方式

mhd8tkvw

mhd8tkvw2#

下面的代码在函数呈现时立即调用deletePost(user._id)

<button onClick={deletePost(user._id)}>Delete</button>

您要做的是将回调函数传递给onClick以执行:

<button onClick={() => deletePost(user._id)}>Delete</button>

这样,您就允许button在单击按钮时 * 调用该函数 *。

相关问题