即使我添加了ID變數，對端點的洗掉呼叫中的“ID”變數也設定為“未定義”

所以我有一個 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}>

您可以使用陣列索引，但這是不好的做法，因為它可能會更改并在您的應用程式中引入錯誤。

標籤：

上一篇：單擊時如何更改按鈕的圖示，按鈕已具有單擊事件

下一篇：反應從孩子到父母的更新陣列道具