3 回答

TA貢獻1757條經驗 獲得超8個贊
首先,在您的情況下,兩種語法完全不同,您可能正在尋找的是兩者之間的區別
this.setState({pictures: this.state.picture.concat(pics)})
和
this.setState(prevState => ({ pictures: prevState.pictures.concat(pics)}))
要理解為什么第二種方法是首選方法,您需要了解React在內部對setState的作用。
React將首先將您傳遞的對象合并setState()
到當前狀態。然后它將開始那個和解的事情。因為呼叫setState()
可能不會立即更新您的狀態。
React可以將多個setState()
調用批處理為單個更新,以獲得更好的性能。
考慮一下這個簡單的例子,要理解這一點,在你的函數中你可以多次調用setState
myFunction = () => { ... this.setState({pictures: this.state.picture.concat(pics1)}) this.setState({pictures: this.state.picture.concat(pics1)}) this.setState({pictures: this.state.picture.concat(pics1)}) ...}
這不是一個簡單的應用程序中的有效用例,但隨著應用程序變得復雜,多個setState調用可能發生在多個地方,做同樣的事情。
所以現在為了執行有效的更新,React通過提取傳遞給每個setState()
調用的所有對象來完成批處理,將它們合并在一起形成一個對象,然后使用該單個對象來執行setState()
。根據setState文檔
如果您嘗試在同一周期中多次增加項目數量,則會產生相當于:
Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)后續調用將覆蓋同一周期中先前調用的值,因此數量將僅增加一次。如果下一個狀態取決于先前的狀態,我們建議使用更新程序功能表單
因此,如果任何對象包含相同的鍵,則存儲具有相同鍵的最后一個對象的鍵的值。因此更新只發生一次最后一個值

TA貢獻1934條經驗 獲得超2個贊
快速回答:
始終使用setState()的函數形式。
this.setState((state, props)=>({ someValue: state.somevalue + 1}));
這種方法不易出錯,有助于消除一些非常難以發現的錯誤。即使react批處理多個此類更新,每個更新都是單獨的函數調用,后續更新不會導致某些更新丟失。
另一種方法
this.setState({someValue: state.somevalue + 1});
如果頻繁重復,可能會導致某些更新丟失,因為React會批量處理此類頻繁更新。
添加回答
舉報