错误参数不可分配给“AxiosRequestConfig”类型的参数

rum*_*mon 5 javascript mongodb typescript reactjs axios

我希望能够删除从 MongoDB 获取的列表中的项目。

列表数组的项目从 MongoDB 检索并显示在 React 应用程序中(我使用 Typescript)。

不幸的是,我收到错误HERE I get error Argument of type '{ itemId: any; }' is not assignable to parameter of type 'AxiosRequestConfig'

费用列表项.tsx

import React from "react";
import { IconButton, ListItem, ListItemSecondaryAction, ListItemText } from "@material-ui/core";
import DeleteIcon from '@material-ui/icons/Delete';
import { ExpenseAndAmountObject } from '../ExpenseAndAmountObject';
import axios from 'axios';
interface Props {
    expenseTitle: string;
    expenseAmount: string;
    currencySymbol: string;
    item: ExpenseAndAmountObject;
    expenseAndAmountList: Array<ExpenseAndAmountObject>;
    setExpenseAndAmountList: (value: Array<ExpenseAndAmountObject>) => void;
  }

const ExpensesListItem: React.FC<Props> = (
    {
        expenseTitle,
        expenseAmount,
        currencySymbol,
        item,
        expenseAndAmountList,
        setExpenseAndAmountList
    }: Props) => {

        const DeleteListItem = (toBeDeletedItemId: any) => {
        setExpenseAndAmountList(expenseAndAmountList.filter(el => el._id !== toBeDeletedItemId));

        axios.delete('http://localhost:4000/app/expenseslist',{itemId:toBeDeletedItemId}) 
//HERE I GET THE ERROR Argument of type '{ itemId: any; }' is not assignable to parameter of type 'AxiosRequestConfig'
        .catch(function (error) {
            console.log(error);
        });
    }
    return (
        <>
            <ListItem className="list-item">
                <ListItemText primary={expenseTitle} secondary={expenseAmount + currencySymbol} />
                <ListItemSecondaryAction>
                    <IconButton onClick={()=>DeleteListItem(item._id)} edge="end">
                        <DeleteIcon className="delete-btn" />
                    </IconButton>
                </ListItemSecondaryAction>
            </ListItem>
        </>
      );
  }
  
export default ExpensesListItem;
Run Code Online (Sandbox Code Playgroud)

路线.js

 router.delete('/expenseslist', (request, response) => {
    let itemId = request.body._id;
    ExpenseAndAmountTemplate.findByIdAndRemove(itemId, function(err){
        if(err){
            response.send("/Could not delete the item...");
        } else {
            response.send("/Expenses and amount item was deleted succesfully...");
        }
     });
 });
Run Code Online (Sandbox Code Playgroud)

ExpenseAndAmountModel.js(这是 router.delete 使用的模型)

const mongoose = require('mongoose');

const ExpenseAndAmountTemplate = new mongoose.Schema({
    _id: {
        type:String,
        required:false
    },
    expenseTitle: {
        type:String,
        required:true
    },
    expenseAmount: {
        type:String,
        required:true
    }
});

module.exports = mongoose.model('ExpenseAndAmountData', ExpenseAndAmountTemplate);
Run Code Online (Sandbox Code Playgroud)

你知道如何解决吗?谢谢!

Che*_*tha 14

而不是{ itemId: toBeDeletedItemId }尝试{ data: { itemId: toBeDeletedItemId } }

这样您就可以将数据传递到请求正文。