Почему удаление элемента с событием щелчка происходит неправильно с реакцией

Question

Я полностью запутался с этой проблемой. Из списка статей я удаляю одну из них, получая articleId с данными (). Когда я впервые удаляю, это работает хорошо. Но когда я удаляю снова. Данные () получают прежнюю Вместо 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

Может быть отреагировать разным вопросом. Когда вы визуализируете несколько элементов, в вашем случае, span реагирует, хочет иметь ключевой атрибут.

Попробуйте добавить key={article.articleId} к вашему компоненту промежутка. Это может решить проблему.