jquery - クリックイベントでアイテムを削除すると反応がうまくいかない理由

Question

記事のリストから、data() で articleId を取得してそのうちの 1 つを削除します。最初に削除するときはうまく機能しますが、もう一度削除すると、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}span コンポーネントに追加してみてください。これで問題が解決する場合があります。