当使用新道具调用渲染时，React JS不会完全更新视图

Question

In React JS I have an array that I am passing as a prop (I do not want to use state). If I remove an item from the array and rerender the component, the fields update in number, but do not update in value. The prop being passed is updated. I don't want the textarea value set, because I do not want to use state for this component, so the prop is a child of textarea This is not my actual component, but something I created to demonstrate the problem. My understanding is that when props update, so should the view.

Here is a JSFiddle: https://jsfiddle.net/69z2wepo/12745/

items=["One","Two","Three","Four","Five"];


var Areas=React.createClass({
        handleClickAdd: function() {
        items.push("");
        rerender();
    },

    handleClickRemove: function(fieldindex,event) {
        items.splice(fieldindex,1);
        rerender();
    },

    handleKeyUp: function(event) {
        sdbobj.resizeArea(event.target);
    },

    render: function() {
        return (
            <div>
                {this.props.items.map(function(item,i,arr){
                    return (
                        <div key={i}>
                            <textarea  onKeyUp={this.handleKeyUp}>
                                {item}
                            </textarea>

                            {(arr.length>1?<button onClick={this.handleClickRemove.bind(this,i)}>Remove</button>:"")}
                        </div>
                    )
                }.bind(this)) }
                <button onClick={this.handleClickAdd}>
                    Add
                </button>
                <div>
                    Items = [{items.toString()}]
                </div>
            </div>
        )
    }
});

function resizeArea(elem)
{
    elem.style.height="1px";
    elem.style.height=(elem.scrollHeight)+"px";
}

function rerender()
{
    React.render(<Areas items={items} />, document.getElementById('container'));
}

React.render(<Areas items={items} />, document.getElementById('container'));

Any help is greatly appreciated.

Thanks

Answer 1

Checkout React's article on Reconciliation ... since the key is the index, it becomes out of sync after you remove the item and React can't see that it's changed. If you make the key bound to either the item text or an item id, it should work.

 <div key={item}> <textarea onKeyUp={this.handleKeyUp}> {item} </textarea> {(arr.length>1?<button onClick={this.handleClickRemove.bind(this,i)}>Remove</button>:"")} </div>