Question 87668 in ASP.NET Question posted in
The official documentation can be found here.

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

So I have a webapplication that is using axios to make endpoint request to my api that is on Swagger. In my app currently get and post calls work but not puts or deletes.

For my delete call I pass the userID into the ID field in the URL:

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

But in the console it shows the following two errors:

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

and:

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)

This is my full "ReadUser" file:

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>
    )
}

Also I keep getting "Warning: Each child in a list should have a unique "key" prop."

But as far as I can tell I have added the correct keys? Thanks for any help!

Tags:

2

Answers


  1. 0

    You miss to add userId in axios.put request body. Example:

    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();
        })
  }

    It’s how to fix problem with keys in JSX:

     {APIData.map((data, index) => {
                    return (
                        <tr key={index}>
                           ....
                           <button className="table-btn" onClick={() => onDelete(data.userId)}>Delete</button>
    Login or Signup to reply.
  2. 0

    It could be cors.

    I had the same issue some time ago. Everything worked fine with postman but not with google chrome.

    The problem comes from the fact that when sending methods other than get and post your browser will send a preflight request to make sure you are authorized to make the request.
    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

    How to handle preflight CORS request using Node server?

    For the unique key:
    When you map an array, each element should have a unique key prop.

    In your case your should have

    <tr key={unique_key}>

    The best practice would be to use the id of the element in your db for example:

    <tr key={data.id}>

    You could use the array index but it would be bad practice since it could change and introduce bugs in your application.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search