从对象数组中删除特定项目 Reactjs

Question

Hi All i am building a clone service desk system using React and materialUI I am having issues with removing specific items from an array of objects when the user clicks on it. I have tried to use updatedRow.splice(index,1) but this just removes the last object added to the array and not a specific object. I am trying to remove it based on the ticketID property I have tried to use the array method indexof to console log the specific index of the object but it just returns -1 meaning the item is not in the array when its displaying on the screen. The function should filter and only keep the items which havent been selected based on if the condition is true and remove what is true then should call Setrows to update what is on the screen. Could someone explain exactly what I am doing wrong here see code below...

 /// original array to populated with data 

 let row = [];
 const [rows, setRows] = useState(row);

 const formDataHandler = ({ desc, option }) => {
 const data = {
 description: desc,
 priority: option,
 lastUpdate: Date.now(),
 ticketID:shortid.generate()

 };

setRows([...rows, data]);
console.log(rows);
};

/// delete row function 

 const removeTicket = (index)=> {

 let updatedRow = rows;

// updatedRow.splice(index,1)

console.log(updatedRow.filter(index => ticketID !== index.id? ))

setRows([...updatedRow])



/// returned 

        <Container maxWidth="md">
  <Grid>
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Description</TableCell>
            <TableCell>Priority</TableCell>
            <TableCell>Last update</TableCell>
            <TableCell>Ticket ID</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.length>0?rows.map((row) => (
            <TableRow key={row.ticketID}>
              <TableCell component="th" scope="row">
                {row.description}
              </TableCell>
              <TableCell>{row.priority}</TableCell>
              <TableCell>{row.lastUpdate}</TableCell>
              <TableCell>{row.ticketID}</TableCell>

              <TableCell>
                <IconButton onClick={removeTicket} aria-label="delete" color="primary">
                  <DeleteIcon />
                </IconButton>
              </TableCell>
            </TableRow>
          )):null}
        </TableBody>
      </Table>
    </TableContainer>
  </Grid>
  <FormDialog formData={formDataHandler} />
  {JSON.stringify(rows)}
</Container>
);
}

Answer 1

You need to pass the ticketID to your IconButton 's onClick handler:

<IconButton 
  onClick={() => removeTicket(row.ticketID)} 
  aria-label="delete" 
  color="primary"
>
  <DeleteIcon />
</IconButton>

And update your handler where you can create a new array using the .filter() method:

const removeTicket = (ticketID)=> {
  setRows(rows.filter(item => ticketID !== item.ticketID)
}

This rows.filter() returns every element where the ticketID is not the same as the one you passed down.

Answer 2

If you know index that will be removed you can use Array.prototype.slice and the logic is disconsider the element at index.

So, you will have to add the index as second param in your map function and change the onClick on IconButton to () => removeTicket(index) .

Your remove function will contains the following snippet:

setRows(prevRows => [
  ...prevRows.slice(0, index),
  ...prevRows.slice(index + 1)
]);

If you need the ticketId to make a call to an api you can get it through index rows[index] or by passing it in the onClick function () => removeTicket(row.ticketID, index)