reactjs 快速路由器删除

hjzp0vay  于 2023-02-12  发布在  React
关注(0)|答案(2)|浏览(165)

我用MERN栈(Mongo,Express,React,Node)写了一个简单的“杂货清单”Web应用程序。我遇到的问题是,除非我重新加载页面,否则我的DELETE REST命令不会触发。下面是我的事件处理程序和后端的源代码。

事件处理程序

handleRemove(e) {
        fetch('http://localhost:3001/list/' + e._id, {
            headers: {
                "Access-Control-Allow-Credentials": true,
                "Access-Control-Allow-Origin": "*",
                "Content-Type": "application/json"
            },
            method: "DELETE",
            body: e
        })
        this.refs.list.forceUpdate();
    }

快速后端

router.delete('/list' +'/:id',function(req,res) {
        item.remove({
            _id: req.params.id
        }, function(err) {
            if(err) {
                res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
                res.header("Access-Control-Allow-Methods", "PATCH, POST, GET, PUT, DELETE, OPTIONS");
                res.header("Access-Control-Allow-Methods", "POST, GET, DELETE");
                res.header("Access-Control-Allow-Credentials", "true");
                return res.send(err);
            } else {
                console.log("successfully deleted")
            }
        })
    })

点击

<button onClick={() =>
          this.props.handleRemove(item)}
          className="item" key={item._id + "btn"}>Remove</button>

链接到我的存储库https://github.com/ahahn95/GroceryList

uubf1zoe

uubf1zoe1#

确保正确调用handleRemove onClick。
如果它在页面加载时启动,那么我怀疑您正在执行以下操作:

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

您应在何时执行此操作:

<button onClick={() => this.handleRemove()}>Delete</button>
cidc1ykv

cidc1ykv2#

DELETE命令正在启动。这不会更新UI。
您必须更新state
handleRemove中:

handleRemove(e) {
  fetch('http://localhost:3001/list/' + e._id, {
    headers: {
      "Access-Control-Allow-Credentials": true,
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    },
    method: "DELETE",
    body: e
  })
  .then(res => res.json())
  .then(json => {
    this.setState({items: this.state.items.filter(item => { 
      return item._id !== e._id // change this to match your code if necessary
    })});
    // this.refs.list.forceUpdate(); not sure what this does
  })
  .catch(err => console.log(err));
}

相关问题