使用 ReactJS 删除项目答案

【问题标题】：Delete an item with ReactJS使用 ReactJS 删除项目
【发布时间】：2019-11-14 11:23:16
【问题描述】：

我试图在用户单击“删除”按钮后删除一个项目。通过 handleDelete 函数，当用户单击一本书时，我通过 axios 传递了一个 id（idBooks）。如何从点击中撤回？

您将在下面找到 React 代码，然后是 node js 中的后端代码。

前端

(class extends React.Component {


handleDelete = (e) => {
    e.preventDefault();
    const { book } = this.props;
    axios.delete("http://localhost:8081/delete", book.idBooks )
    .then(res => {
      console.log(res.data);
    }).catch(err => {
      console.warn(err.warn);
    });
  };

  render() {
    const { book, classes } = this.props;
    const token = localStorage.getItem('token');

    return(
      <Paper className= { classes.marginTopBottom }>
       <h2 className={ classes.title }>
       { book.title }
       </h2><hr />
       <div className= { classes.scrollingDiv }>
       <p>
       { book.plot }
       </p>
       </div>
       <hr/>
       <div className={ classes.pStyle }>
       <p>Publish date:<br /> { new Date(book.publish_date).toLocaleDateString() }</p>
       <p>Author:<br /> { book.author }
       </p>
       <p>Genre:<br /> { book.genre }</p>
       </div>
       <div>
       { token && (
       <Button  className={ classes.delete } size="small" onClick={this.handleDelete} type="button" variant="contained" color="primary" 
        component= {Link} to="delete">
       Delete
       <DeleteIcon className={ classes.rightIcon } />
       </Button>
      )}
       </div>
       </Paper>
    )
  }
});

后台

const deleteBook = (req, res) => {
const connection = mysql.createConnection(connectionProperties);
connection.connect();
const query = `DELETE FROM Books WHERE idBooks = ${ req.body.idBooks }`;
connection.query(query, (err, res) => {
    if (err) {
        res.status(500).send(err);
    } else {
        res.status(200).send('Book deleted correctly.');
    }
});
};

【问题讨论】：

你的道具中有idBooks吗？
首先函数必须返回一些东西，你可以做if (err) { return res.status(500).send(err); }然后return res.status(200).send('book deleted correctly.')没有else
你能显示整个路由器代码吗？你在用deletehttp方法吗？

标签： node.js reactjs axios

【解决方案1】：

我会添加一个道具onDeleteCallback，并在成功删除时使用已删除的图书 ID 调用该函数。在父组件（列出所有书籍）中，使用过滤掉的书籍更新状态。

【讨论】：

【解决方案2】：

我想传递参数可能会帮助您解决这个问题。

在delete 按钮上添加一个参数到onClick={()=>this.handleDelete(e,book.idBooks)}
如下更改handleDelete函数

handleDelete = (e,idBooks) => {
    e.preventDefault();
    axios.delete("http://localhost:8081/delete", idBooks )
    .then(res => {
      console.log(res.data);
    }).catch(err => {
      console.warn(err.warn);
    });
  };

【讨论】：

如果您直接在onClick 处理程序中调用handleDelete，如您所示，它将在渲染时调用。因此应该将其作为如下功能提供。 onClick={() => this.handleDelete(e,book.idBooks)}