Javascript 删除处于嵌套状态的项会导致在DOM中删除不正确的项

我正在做一个利用反应和回流的项目。目前我只有一个回流存储：

SubscriptionStore.js

。它包含有关用户订阅的简单详细信息，包括一个嵌套的对象数组，其中每个“标题”的详细信息都附加到用户订阅上

下面是SubscriptionStore.js后面数据的简单分解：

{
    hasThisSubcription: 0
    hasThatSubscription: 1
    nextPeriodStart: "2015-10-12"
    nextYearStartDate: "2016-09-12"
    accountTitles: [{
        id: "1"
        title: "The Name"
        createdDate: "2015-09-12 16:17:08"
    }, {
        id: "2"
        title: "Another Name"
        createdDate: "2015-09-12 16:17:08"
    }, {
        id: "3"
        title: "Yet Another Name"
        createdDate: "2015-09-12 16:17:08"
    }]
}

removeTitle(id) {
    this.subscriptions.accountTitles = _.without(this.subscriptions.accountTitles, _.findWhere(this.subscriptions.accountTitles, { id: id }));
    this.trigger(this.subscriptions)
}

我有一个React组件，允许用户更新现有标题的名称、添加新标题或删除标题。添加和重命名进行得很顺利，但是删除是不正常的，我确信这是因为我还没有完全掌握React/Reflection

以下是此主要组件的相关代码：

var React = require('react')
var Reflux = require('reflux')
var SubscriptionActions = require('../../stores/SubscriptionActions.js')
var SubscriptionStore = require('../../stores/SubscriptionStore.js')

module.exports = React.createClass({

    mixins: [
        Reflux.connect(SubscriptionStore, 'subscriptions')
    ],

    /**
     * Add new title
     * @param  {number} id The Title ID
     */
    addTitle() {
        SubscriptionActions.addNewTitle()
    },

    /**
     * Remove Title from state using on ID
     * @param  {number} id The Title ID
     */
    removeTitle(id) {
        SubscriptionActions.removeNewTitle(id)
    },

    /**
     * Update Title title using ID
     * @param  {number} id  The Title ID
     * @param  {string} value  The new title
     */
    saveTitle(id, value) {
        SubscriptionActions.updateNewTitle(id, value)
    },

    render() {

        // Check for Title subscriptions and create an editable field for each
        var theTitles = []
        for (var i = 0; i < this.state.subscriptions.accountTitles.length; i++) {
            theTitles.push(
                <EditableCapsule
                    key = {i}
                    ref = {'title' + i}
                    removable = {i === 0 ? false : true}
                    labelValue = ''
                    clickToRemove = {this.removeTitle.bind(this, i)}
                    primaryAction = {this.saveTitle.bind(this, i)}
                />
            )
        }

        return (
            <div>
                <ScrollArea ref='scrollArea'>
                    {theTitles}
                </ScrollArea>
            </div>
        )
    }
})

问题

无论我点击哪个标题删除，它总是最后一个被删除的标题。如果我在

this.subscriptions.accountTitles

内容之前和之后吐出一个值，它表明确实从数据中删除了正确的对象，但React呈现的元素似乎总是最后一个被删除的项

---

知道会发生什么吗？

不要使用

，非常感谢您的回复。那么，你能告诉我，我将如何更新
SubscriptionStore.js
中的
removeTitle
函数，以使用你传入的应用程序实例而不是id吗？你也可以传入id-关键是不要传入数组位置，数组位置没有任何意义，而是传入一个实际上属于你标题的东西。因此，如果您想传入
tile.id
，也可以。只要您记得根据该id将其从数组中删除，就可以在removale函数中使用类似于
accountTiles:accountTiles.filter（函数（v）{return v.id！==removeId；}）
的东西。有道理。非常感谢！
...

render: function() {
  var accountTiles = this.state.subscriptions.accountTitles; 
  var tileset = accountTiles.map(this.buildTiles);
  return <ScrollArea ref='scrollArea'>{ tileset }</ScrollArea>;
},

buildTiles: function(tile, position) {
  var identifier = tile.title + title.id;
  return (
    <EditableCapsule
      key = { identifier }
      ref = { identifier }
      removable = { position !== 0 }
      labelValue = ''
      clickToRemove = { this.removeTitle.bind(this, tile) }
      primaryAction = { this.saveTitle.bind(this, tile) }
    />;
  );
},
...