javascript - React js功能组件中的删除功能

问题描述

我在反应 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;

标签： javascriptreactjsreact-functional-component

您在这里做错了，在以下几行中：

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

javascript - React js功能组件中的删除功能

问题描述

解决方案

推荐阅读