使用defaultValue时，React不会正确更新已删除的项目

Question

在下面的代码中，我有一个Item的列表。每个人都会渲染一个具有输入字段的组件来更改该项目名称。

Item的状态是通过props处理的，所以父对象告诉Item它是什么，并处理项目的编辑/删除（更复杂的版本使用Redux，这似乎是正确的方式处理状态..）

但是，如果我将输入字段设置为defaultValue，然后尝试删除项目，React将删除最后一项。但是，项目状态显示已删除的正确项目。

点击按钮之前：

应用状态：{items: ['1', '2', '3', '4']}

后：

应用状态：{items: ['1', '3', '4']}

再次：第二项被删除（作为按钮下面的html的证据），但反应呈现第四项被删除了！

来源：

import React from 'react';
import ReactDOM from 'react-dom';

var App = React.createClass({
    getInitialState: function() {
        return { items: ['1', '2', '3', '4'] };
    },
    removeSecond: function(e) {
        e.preventDefault();
        this.removeItem(1);
    },
    editItem: function(index, newItem) {
        var newItems = this.state.items.slice();
        newItems[index] = newItem;
        this.setState({items: newItems});
    },
    removeItem: function(index) {
        var newItems = this.state.items;
        newItems.splice(index, 1);
        this.setState({items: newItems});
    },
    render: function() {
        var self = this;
        return (
            <div id='itemsList'>
                { this.state.items.map( function(item, i) {
                    return <Item name={item} 
                        index={i} 
                        key={i} 
                        editItem={self.editItem}
                        removeItem={self.removeItem} />;
                })}
                <form onSubmit={this.removeSecond}>
                    <button>Remove 2nd</button>
                </form>
                <div>{this.state.items.map(function(item, i) {
                    return <p key={i}>{i} : '{item}'</p>;
                })}</div>
            </div>
        );
    }
});

var Item = React.createClass({
    handleChangeName: function(e) {
        this.props.editItem(this.props.index, e.target.value);
    },
    render: function() {
        return (
            <div id="item">
                <input type="text" defaultValue={this.props.name} onChange={this.handleChangeName} />
            </div>);
    }
});

ReactDOM.render(
    <App />,
    document.getElementById('items_test')
);

源代码：https://bitbucket.org/MintyAnt/multi_react_items

我该如何解决这个问题？或者，在这里处理状态的正确方法是什么？