jquery - 为什么使用单击事件删除项目时反应出错

Question

我完全对这个问题感到困惑。从文章列表中，我通过使用 data() 获取 articleId 来删除其中一个。当我第一次删除时，它运行良好。但是当我再次删除时。data() 得到前者articleId而不是它的articleId。但是当我查看event.target时，数据集中的articleid很好。什么错了？

由于代码太长，我选择了重要的部分发布。

remove: function(e) {
    var articleId = $(e.target).data("articleid");
    if (confirm("are you sure to delete the article？")) {
      $.ajax({
        url: config.api.deleteArticle[0].replace("<article_id>", articleId)
                                        .replace("<studio_id>", cookie.getCookie("studioId")),
        type:config.api.deleteArticle[1],
        success: function() {
          this.reload();
        }.bind(this),
        error: function() {
          alert("fail");
        }
      });
    }
  },
  reload: function(sortType){
    $.ajax({
      url:config.api.getArticles[0],
      success:function(d){
        this.setState({articles:d.articles});
      }.bind(this),
      error:function(){
        alert("fail");
      }
    });
  },
 render: function() {
     var self = this;
      var content = this.state.articles.map(function(article) {
            return (
          <span className={(self.props.manageOn)?"article-delete": "article-delete hidden"} data-articleid={article.articleId} onClick={self.remove}>删除</span>
                                 );
       }
       return (
         <div>
              {content}
         </div>
       )
 }

我想知道是否是因为反应差异。但我对此了解不多。

Answer 1

可能是反应差异问题。当您渲染多个项目时，在您的情况下，跨度，反应想要有一个关键属性。

尝试添加key={article.articleId}到您的跨度组件。这可能会解决问题。