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

Question

大家好我正在使用 React 和 materialUI 构建一个克隆服务台系统当用户单击它时，我遇到了从对象数组中删除特定项目的问题。我曾尝试使用 updatedRow.splice(index,1) 但这只是删除添加到数组中的最后一个对象而不是特定对象。我试图根据 ticketID 属性删除它 我尝试使用数组方法 indexof 来控制台记录对象的特定索引，但它只返回 -1，这意味着该项目在屏幕上显示时不在数组中。该函数应该根据条件是否为真来过滤并仅保留未被选中的项目，并删除为真的项目，然后应该调用 Setrows 来更新屏幕上的内容。有人可以在这里准确解释我做错了什么，请参阅下面的代码...

 /// 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

您需要将 传递ticketID给您的处理IconButton程序onClick：<IconButton&nbsp;&nbsp; onClick={() => removeTicket(row.ticketID)}&nbsp;&nbsp; aria-label="delete"&nbsp;&nbsp; color="primary">&nbsp; <DeleteIcon /></IconButton>并更新您的处理程序，您可以在其中使用以下方法创建一个新数组.filter()：const removeTicket = (ticketID)=> {&nbsp; setRows(rows.filter(item => ticketID !== item.ticketID)}这将返回与您传递的不同的rows.filter()每个元素。ticketID