React setState 不適用於 array.prototype.splice

Question

我從這里開始關注一個反應教程，並嘗試添加刪除按鈕以刪除列表中的名稱。 但是，如果我在 setState 方法中設置friends:this.state.friends.splice(findIndex,1) ，刪除將無法正常工作，但如果我設置this.state.friends.splice(findIndex,1)在 setState 方法之外，有人可以解釋為什么會這樣嗎？ 謝謝（這里是jsfiddle ）。
（編輯：這是來自鏈接的 jsx）

var HelloHandler = React.createClass({
    getInitialState: function(){
        return{
            name: 'Tyler McGinnis',
            friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen']
        }
    },
    addFriend: function(friend){
        this.setState({
            friends: this.state.friends.concat([friend])
        })
    },
    deleteFriend: function(name){
        findIndex=this.state.friends.indexOf(name);
        this.state.friends.splice(findIndex,1)//
        this.setState({
            friends: this.state.friends 
            //delete won't work properly if change to friends:this.state.friends.splice(findIndex,1)
        })
    },
    render: function(){
      return (
        <div>
            <div>
                Hello{this.state.name} 
            </div>
            <div>
                <PrintFriends friendList={this.state.friends} deleteFriend={this.deleteFriend}/>
            </div>
            <div>
                <AddFriend addFriend={this.addFriend} />
            </div>
       </div>
      )
    }
});


var AddFriend=React.createClass({
    getInitialState: function(){
        return {
            inputName:''
         }
    },
    setFriendNameToState: function(evt){
        this.setState({
            inputName: evt.target.value
        })
    },
    updateFriendNameToList: function(){
        this.props.addFriend(this.state.inputName);
        this.setState({
            inputName: ''
        })
    },
    render: function(){
        return(
            <div>
                <input type='text' onChange={this.setFriendNameToState} />
                <button onClick={this.updateFriendNameToList}>update list</button>
            </div>
        )
    }
});

 PrintFriends=React.createClass({
     deleteName: function(people){
        this.props.deleteFriend(people.name);
     },
     render: function(){
                var self=this;
                nameList=this.props.friendList.map(function(name){
                                return(
                                    <li key={name}>
                                         {name} <button onClick={this.deleteName.bind(null,{name})}>delete</button>
                                    </li>
                                )
                            }.bind(self));
                return(
                     <div>
                        <h3> Friends </h3>
                        <ul>
                            {nameList}
                        </ul>
                    </div>
                )
            }
})


React.render(<HelloHandler />, document.getElementById('app'));

Answer 1

這是一個非常有趣的問題，需要回到非常基礎的狀態渲染。 React 只有在狀態改變時才會重新渲染。

這里的“改變”意味着狀態指向另一個對象。 如果狀態改變了它的值，但仍然指向同一個對象，那么重新渲染就不會發生。

進一步來說：

friends = ['Amy', 'Beatrix', 'Cedric']
friends.splice(0,1) // friends === ['Beatrix', 'Cedric'], however, it still points to the same object.

要使其正常工作，您應該改用過濾器：

// filter return a new object
this.setState({
 friends: friends.filter((value, index) => index!==findIndex)
})

另一種方式，如果你的數組足夠簡單

// JSON.parse return a new object  
this.setState({
 friends: JSON.parse(JSON.stringify(this.state.friends)) 
})

Answer 2

splice直接修改數組，返回拼接后的項。 因此，如果您將friends設置為this.state.friends.splice(findIndex,1) ，您會將其設置為“已刪除”項目。 我猜這根本不是你想要的。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

但是，您知道，您所說的只是“刪除無法正常工作”，所以您還沒有真正說明正在發生的事情或您想要發生的事情......