所以我有一个 web 应用程序，它使用 axios 向我在 Swagger 上的 api 发出端点请求。在我的应用程序中，当前获取和发布呼叫作业但不放置或洗掉。

对于我的洗掉呼叫，我将 userID 传递到 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>
    )
}

此外，我不断收到“警告：串列中的每个孩子都应该有一个唯一的“关键”道具。”

但据我所知，我添加了正确的键？谢谢你的帮助！

uj5u.com热心网友回复：

您错过了添加userId请求axios.put正文。例子：

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>

uj5u.com热心网友回复：

它可能是cors。

前段时间我有同样的问题。邮递员一切正常，但谷歌浏览器却不行。

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

如何使用 Node 服务器处理预检 CORS 请求？

对于唯一键：当你映射一个阵列时，每个元素都应该有一个唯一的键道具。

在你的情况下你应该有

<tr key={unique_key}>

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

<tr key={data.id}>

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