Question

我在尝试使用我的删除函数时遇到问题，该函数调用API方法从数据库中删除所选项目。

API只接受网页ID，因此我一直在尝试将ID发送到API。

这是存在于应用程序主容器中的函数。

  deletePage(id) {
    instance.put(`/admin/deletePage/${id}`).then((response) => {
      this.getPages();
      window.location.replace('/')
    }).catch((error) => {
      console.log(error)
    })
  }

然后我将此函数作为prop传递给Dashboard组件，在那里我创建另一个函数来处理删除：

  handleDelete(e, id) {
    e.preventDefault()
    this.props.deletePage(id)
  }

最后，我的渲染功能：

render() {
    const pages = this.props.pages.map((page, i) => {
        return (
        <div key={i}>
        <h2>{page.title}</h2>
        <a href={`/admin/edit-page/${i}`}>Edit</a>
        <button onClick={this.handleDelete(i)}>Delete</button>
        </div>
        )
    });

    return (
      <div>
        <h2>Dashboard</h2>
        {pages}
      </div>
    );
  }

目前我在控制台中收到此错误：e.preventDefault is not a function

如果我删除了preventDefault行，它只会导致不断重新加载。

请帮忙。只是想删除mwhaha的东西

Answer 1

我认为这里存在两个问题。

首先，this.handleDelete参数的顺序应颠倒过来：this.handleDelete(id, e)。事件对象始终是最后提供的。

其次，onClick={this.handleDelete(i)}应为onClick={this.handleDelete.bind(this, i)}。 onClick={this.handleDelete(i)}将this.handleDelete的调用结果分配给onClick。当您在用户单击按钮时调用该函数时，您在渲染阶段意外调用了this.handleClick。

Answer 2

你应该使用更高阶的功能来做到这一点。它只是一个返回另一个函数的函数。

handleDelete(id) {
    return (event)=> {
        event.preventDefault()
        this.props.deletePage(id)
    }
}

然后以与之前相同的方式打电话

 <button onClick={this.handleDelete(i)}>Delete</button>

具有多个参数的反应函数

2 个答案: