React setState直接修改prevState的分支？

Question

我一直在尋找一些示例代碼反應過來（在antd文檔），我注意到他們的代碼等同於：

this.setState(prevState => { prevState.name = "NewValue"; return prevState; }); 

這看起來有點調皮，但它實際上破壞任何東西？由於它使用箭頭函數，因此即使React在後臺對它們進行批處理，也不會中斷正在應用的更改的順序。

當然，setState旨在期望一個部分狀態，因此可能會出現性能副作用，因爲它可能會嘗試將整個狀態應用於自身。

編輯：（響應於@Sulthan）

實際的代碼是這樣的：

handleChange(key, index, value) { 
    const { data } = this.state; 
    data[index][key].value = value; 
    this.setState({ data }); 
} 

N.B.數據是一個數組，所以它只是被引用複製然後發生了變異。

它實際上完全錯誤，因爲它甚至不使用箭頭函數來獲取最新狀態。

它來自於可編輯的表格例子在這裏：https://ant.design/components/table/

Answer 1

你的例子也可以寫成：

this.setState(prevState => { 
    prevState.name = "NewValue" 
    return "NewValue"; 
}); 

當一個函數傳遞給state最重要的事情是不是發生變異傳遞參數並返回新狀態。你的例子都失敗了。

... prevState是對之前狀態的參考。它不應該直接變異。相反，改變應該通過構建基於從prevState輸入一個新的狀態對象表示...

（從setState）

我不知道它是否是以往任何時候都可以使用setState就像在你例如，但看着更改日誌我真的懷疑它。