即使我添加了 ID 变量，对端点的删除调用中 "ID" 的变量也设置为 "undefined"

Question

所以我有一个网络应用程序使用 axios 向我的 api 发出端点请求，它在 Swagger 上。在我的应用程序中，当前获取和 post 调用有效，但无法放置或删除。

对于删除调用，我将用户 ID 传递到 URL 中的 ID 字段：

const onDelete = (userId) => {
        axios.delete(`https://localhost:44373/api/Users/${userId}`)
            .then(() => {
                getData();
            })
    }

但是在控制台中却显示了以下两个错误：

DELETE https://localhost:44373/api/Users/undefined 400 xhr.js:210

和：

Uncaught (in promise) Error: Request failed with status code 400
    at createError (createError.js:16:1)
    at settle (settle.js:17:1)
    at XMLHttpRequest.onloadend (xhr.js:66:1)

这是我的完整“ReadUser”文件：

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Table } from 'react-bootstrap';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Link } from 'react-router-dom';




export default function Read() {

    const setData = (data) => {
        let { userId, firstName, lastName, emailAddress, phoneNumber, password } = data;
        localStorage.setItem('UserId', userId);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('EmailAddress', emailAddress);
        localStorage.setItem('Phonenumber', phoneNumber);
        localStorage.setItem('Password', password)
    }

    const url = `https://localhost:44373/api/Users`;
    const getData = () => {
        axios.get(url)
            .then((getData) => {
                setAPIData(getData.data);
            })
    }

    const onDelete = (userId) => {
        axios.delete(`https://localhost:44373/api/Users/${userId}`)
            .then(() => {
                getData();
            })
    }

    const [APIData, setAPIData] = useState([]);
    useEffect(() => {
        axios.get(`https://localhost:44373/api/Users`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

  

    return (

        <div>
            <Table bordered>
                <thead>
                    <tr>
                        <th key="firstName">First Name</th>
                        <th key="lastName">Last Name</th>
                        <th key="emailAddress">Emailaddress</th>
                <th key="phoneNumber">Phonenumber</th>
                        <th>Update</th>
                        <th>Delete</th>
                    </tr>
                </thead>

                <tbody>
                    {APIData.map((data) => {
                        return (
                            <tr>
                                <td>{data.firstName}</td>
                                <td>{data.lastName}</td>
                                <td>{data.emailAddress}</td>
                                <td>{data.phoneNumber}</td>
                                <td><Link to='/UpdateUser'><td><button className="table-btn" onClick={() => setData(data)}>Update</button></td></Link></td>
                                <td>
                                    <button className="table-btn" onClick={() => onDelete(data.id)}>Delete</button>
                                    </td>
                            </tr>
                        )
                    })}
                </tbody>
            </Table>
        </div>
    )
}

我还不断收到“警告：列表中的每个 child 都应该有一个唯一的“关键”道具。”

但据我所知我添加了正确的密钥？感谢您的帮助！

Answer 1

您没有在 axios.put 请求正文中添加 userId。示例：

const updateAPIData = () => {
        axios.put(`https://localhost:44373/api/Users/${userId}`, {
            userId,
            lastName,
            emailAddress,
            phoneNumber,
            password
        }).then(() => {
            navigate('/ReadUser')
        })
    }

 const onDelete = (userId) => {
    axios.delete(`https://localhost:44373/api/Users/${userId}`, { data: { userId }})
        .then(() => {
            getData();
        })
  }

这是解决 JSX 键问题的方法：

 {APIData.map((data, index) => {
                    return (
                        <tr key={index}>
                           ....
                           <button className="table-btn" onClick={() => onDelete(data.userId)}>Delete</button>

Answer 2

可能是cors。

前段时间我遇到了同样的问题。 postman 一切正常，但 google chrome.

问题在于，当发送 get 和 post 以外的方法时，您的浏览器将发送预检请求以确保您有权发出请求。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

How to handle preflight CORS request using Node server?

对于唯一键：当你映射一个数组时，每个元素应该有一个唯一的键属性。

在你的情况下你应该

<tr key={unique_key}>

最佳做法是使用数据库中元素的 ID，例如：

<tr key={data.id}>

您可以使用数组索引，但这是一种不好的做法，因为它可能会改变并在您的应用程序中引入错误。

即使我添加了 ID 变量，对端点的删除调用中 "ID" 的变量也设置为 "undefined"

Variable for "ID" in delete call to endpoint is set to "undefined" even when I have an ID variable added

asp.net

rest

swagger

reactjs