jquery - why remove an item with a click event goes wrong with react -

i totally confused problem.from list of articles,i delete 1 of them getting articleid data().when first delete,it works well.but when delete again.the data() former articleid rather articleid.but when event.target,the articleid in dataset fine.what' wrong?

for code long,i chose important part post.

remove: function(e) {      var articleid = $(e.target).data("articleid");      if (confirm("are sure delete 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>         )   }

i wonder whether because react diff.but don't know lot it.

could react diff issue. when render multiple items, in case spans, react wants have key attribute.

try adding key={article.articleid} span component. may solve issue.