變異上反應狀態手動，然後調用的setState

我學習陣營JS讓我的代碼一個簡單的待辦事項列表和部分如下：變異上反應狀態手動，然後調用的setState

changeStatus(e, index) { 
    this.state.tasks[index].status = e.target.value; 
    this.setState((prevState) => ({ 
     tasks: prevState.tasks 
    })); 
}

由於陣營文檔中說，我們不應該改變state我們應該調用setState來代替，因此，我在控制檯上收到一條警告，說在手動更改後甚至調用setState。

我這樣做是因爲，對我來說，是比較實用這樣做比分離task，我陣列上做了splice，並調用setState用新值。

我的方法有問題嗎？您如何建議以有效且不重複的方式更新狀態？

來源

2017-06-15 juniorgarcia

[該陣營文檔概述爲什麼這是一個壞主意：（HTTPS：//facebook.github .io/react/docs/react-component.html＃state）「不要直接改變this.state，因爲調用setState（）之後可能會替換你所做的變異**」。換句話說，如果您直接改變狀態，則不能保證您的更改實際上會持續存在。 –

當我來自Vue時，那不是我的擔憂。謝謝！ – juniorgarcia

是的，Vue一般似乎設計時考慮到了突變（這就是爲什麼很多人喜歡React，即使這不是我個人的偏好）。你必須在React中使用'setState'的原因是它允許優化 - 例如如果連續快速調用兩次'setState'，它們可能會合併爲一次批量更新。再次引用文檔：「將setState'視爲請求而不是立即更新組件的命令。」 –

試試這個：

changeStatus(e, index) { 
     const tmp = { ...this.state }; 
     tmp.tasks[index].status = e.target.value; 
     this.setState(tmp); 
    }

來源

2017-06-15 14:37:11

簡單，容易理解。 – rossipedia

使用擴展運算符的非常乾淨的解決方案。謝謝：） – juniorgarcia

不應該直接變異的狀態，要做到這一點創建國家一個新的對象，然後更新並設置回狀態像

changeStatus(e, index) { 
    var tasks = {...this.state.tasks} 
    tasks[index].status = e.target.value; 
    this.setState({tasks}); 
}

如果你想知道，什麼{...this.state.tasks}不要再查這個答案：

What is the meaning of this syntax "{...x}" in Reactjs

然而，你還可以使用ES5 Object.assign（）操作狀態的副本一樣

var tasks = Object.assign({}, this.state.tasks)

來源

2017-06-15 14:40:16

變異上反應狀態手動，然後調用的setState

回答

相關問題