How should I pass the data in my API link-CodePudding

import * as react from 'react'
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import axios from "axios"

export default function DeleteInvoice({delID,checkboxSelection}) {

const [open, setOpen] = react.useState(false);
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));

const handleClickOpen = () => {
setOpen(true);
 };

const handleClose = () => {
setOpen(false);
 };


    async function delData() {
             axios.get('http://localhost:8080/HRCproject/DeleteServlet? 
    docId=' delID).then((response) => {
            console.log(response);
            // setData([])
            // setDataPageCount(0);
        }).catch((error) => {
            console.log(error);
        });
    
        handleClose();
    }
 


 return (
 <>
 <div>
 <Button variant="contained" onClick={handleClickOpen}>
    Open responsive dialog
  </Button>
  {console.log(delID)}
  <Dialog
    fullScreen={fullScreen}
    open={open}
    onClose={handleClose}
    aria-labelledby="responsive-dialog-title"
  >
    <DialogTitle id="responsive-dialog-title">
      {"Use Google's location service?"}
    </DialogTitle>
    <DialogContent>
      <DialogContentText>
        Let Google help apps determine location. This means sending anonymous
        location data to Google, even when no apps are running.
      </DialogContentText>
    </DialogContent>
    <DialogActions>
      <Button autoFocus onClick={handleClose}>
        Disagree
      </Button>
      <Button onClick={delData} autoFocus>
        Agree
      </Button>
    </DialogActions>
  </Dialog>
</div>
</>
)
}

I am trying to pass the value to my api link but it's showing as undefined on the console bcoz i am taking delID as an array How should I pass the data in the link.

const [delID,setDelID] = useState([]);

this is the code where I am defining the delID

    <DataGrid 
            getRowId={(invoiceData) => invoiceData.doc_id}
            checkboxSelection={checkboxSelection} rows={invoiceData} columns={columns}
            onSelectionModelChange ={(invoiceData)=>{
            console.log(invoiceData)
            console.log(delID)
            setDelID(invoiceData);
            } }/>

here I am setting the delID

I am fetching the link from my servlet It works when instead of delID I directly pass Doc_ID eg:19923732.

CodePudding user response：

TL;DR: Try delID.doc_id in your request configuration:

axios.get('http://localhost:8080/HRCproject/DeleteServlet? 
    docId=' delID.doc_id) // change: delID ==> delID.doc_id

NL;PR: I think your state setter setDelID is not an id string but an object. Based on this property you use:

getRowId={(invoiceData) => invoiceData.doc_id}

And that you set the delID state to be the invoiceData object instead of the doc_id string:

onSelectionModelChange ={(invoiceData)=>{ //...
setDelID(invoiceData);

Perhaps, you wanted to change the line above to be setDelID(invoiceData.doc_id) instead. This line moved the initial fix here.

CodePudding user response：

Your callback sets state with an array of selected ids

onSelectionModelChange={(invoiceData) => {
  console.log(invoiceData) // eg. ['123412','241231'] if 2 records are selected.
  console.log(delID)
  setDelID(invoiceData);
}}

Then in delData function you should join those values first

// delID eg. ['123412','241231'] 
const pairs = delID.map(id => "id="   encodeURIComponent(id));
const queryString = pairs.join("&");
axios.get('http://localhost:8080/HRCproject/DeleteServlet? 
    docId='  queryString).then((response) => {...