Question

我在react js中使用功能组件。这是我的删除功能，我想通过其相应的ID删除数据。

function table() {
    
       ..........

    //Delete data
    const removeData = (id) => {
        if (window.confirm("Are you sure?")) {

            fetch('http://127.0.0.1:8000/api/' + id,
                {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'content-Type': 'application/json'
                    }
                })

                .then(console.log("Deleted"))
                .catch(err => console.log(err));
        }
    };

我想先在带有窗口的表格中单击“删除图标” 在删除数据之前进行确认。但是问题是我什么时候刷新 localhost中的项目删除功能自动运行并删除所有数据，而无需单击删除图标。如何解决此错误？

return (
..............
<Table className={classes.table} aria-label="simple table"  >
  <THead color="primary">
    <Trow>
       <TableCell align="right">Item Number</TableCell>
       <TableCell align="right">Description</TableCell>
        <TableCell align="right">Unit</TableCell>
        <TableCell align="right">Quantity</TableCell>
        <TableCell align="right">Cost</TableCell>
        <TableCell align="right">Supplier</TableCell>
        <TableCell align="right">Action</TableCell>
    </Trow>
</THead>
   <TableBody>
    {
       (data.length > 0)
        ?
        data && data.map((lData, id) => {
        return (
        <Fragment key={id}>
           <Trow>
                <TableCell component="th" scope="row">{lData.item_no}</TableCell>
                <TableCell align="right">{lData.description}</TableCell>
                <TableCell align="right">{lData.unit}</TableCell>
                <TableCell align="right">{lData.quantity}</TableCell>
                <TableCell align="right">{lData.cost}</TableCell>
                <TableCell align="right">{lData.supplier}</TableCell>
                <TableCell align="right">
                <IconButton color="inherit" aria-label="Edit">
                   <EditIcon />
                </IconButton>
                <IconButton color="inherit" aria-label="Delete" onClick={removeData(lData.id)}>
                    <DeleteIcon />
                </IconButton>

         </TableCell>
        </Trow>
        </Fragment>
........
);
}
export default table;

Answer 1

您在以下几行中做错了事：

            <IconButton color="inherit" aria-label="Delete" onClick={removeData(lData.id)}>
                <DeleteIcon />
            </IconButton>

您没有将回调传递给删除处理程序，而是直接调用它。您必须像这样通过它

onClick={() => removeData(lData.id)}

这将使上面的代码如下：

            <IconButton color="inherit" aria-label="Delete" onClick={() => removeData(lData.id)}>
                <DeleteIcon />
            </IconButton>

Answer 2

更改以下行：

 <IconButton color="inherit" aria-label="Delete" onClick={removeData(lData.id)}>
       <DeleteIcon />
 </IconButton>

转到以下代码行：

  <IconButton color="inherit" aria-label="Delete" onClick={() => removeData(lData.id)}>
        <DeleteIcon />
  </IconButton>

在React js功能组件中删除功能

2 个答案: