React应用中如何将MongoDB列表点击项ID传递给axios.delete实现删除

前端修改（ExpensesListItem.tsx） #

你已经在组件props中拿到了对应条目的item._id，直接将ID拼接到DELETE请求的URL中即可，推荐先请求接口成功后再修改本地状态，避免前后端数据不一致：

// 仅展示修改后的DeleteListItem函数，其余代码保持不变
const DeleteListItem = () => {
    // 把条目ID拼到请求URL末尾
    axios.delete(`http://localhost:4000/app/expenseslist/${item._id}`)
    .then(() => {
        // 接口请求成功后再更新本地列表
        setExpenseAndAmountList(expenseAndAmountList.filter(el => el._id !== item._id));
    })
    .catch(function (error) {
        console.log(error);
    });
}

后端修改（routes.js） #

原来的删除路由没有定义ID参数位，因此无法通过request.params.id拿到传递的ID，同时异步接口不适合用redirect跳转，调整为返回JSON响应更合理：

// 修改删除路由，添加:id参数占位
router.delete('/expenseslist/:id', (request, response) => {
    ExpenseAndAmountTemplate.findByIdAndRemove(request.params.id, function(err){
        if(err){
            response.status(500).json({message: "删除条目失败", error: err});
        } else {
            response.status(200).json({message: "条目删除成功"});
        }
     });
});
// 原有post路由无需修改

内容的提问来源于stack exchange，提问作者rumon