亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何更新Reaction中的嵌套狀態屬性

如何更新Reaction中的嵌套狀態屬性

慕的地10843 2019-06-26 15:54:55
如何更新Reaction中的嵌套狀態屬性我試圖使用這樣的嵌套屬性來組織我的狀態:this.state = {    someProperty: {       flag:true    }}但是像這樣更新狀態,this.setState({ someProperty.flag: false });不管用。如何才能正確地做到這一點?
查看完整描述

3 回答

?
慕婉清6462132

TA貢獻1804條經驗 獲得超2個贊

為了setState對于嵌套對象,您可以遵循以下方法,因為我認為setState不處理嵌套更新。

var?someProperty?=?{...this.state.someProperty}someProperty.flag?=?true;this.setState({someProperty})

其思想是創建一個虛擬對象,對其執行操作,然后用更新的對象替換組件的狀態

現在,擴展操作符只創建對象的一個級別嵌套副本。如果您的狀態是高度嵌套的,例如:

this.state?=?{
???someProperty:?{
??????someOtherProperty:?{
??????????anotherProperty:?{
?????????????flag:?true
??????????}
??????????..
??????}
??????...
???}
???...}

您可以在每個級別上使用擴展運算符設置State,如

this.setState(prevState?=>?({
????...prevState,
????someProperty:?{
????????...prevState.someProperty,
????????someOtherProperty:?{
????????????...prevState.someProperty.someOtherProperty,?
????????????anotherProperty:?{
???????????????...prevState.someProperty.someOtherProperty.anotherProperty,
???????????????flag:?false
????????????}
????????}
????}}))

然而,隨著狀態越來越嵌套,上面的語法變得每況愈下,因此我建議您使用immutability-helper包來更新狀態。



查看完整回答
反對 回復 2019-06-26
?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

把它寫成一行

this.setState({ someProperty: { ...this.state.someProperty, flag: false} });


查看完整回答
反對 回復 2019-06-26
?
UYOU

TA貢獻1878條經驗 獲得超4個贊

有時直接回答并不是最好的:)

簡短版本:

這段代碼

this.state = {
    someProperty: {
        flag: true
    }}

應該簡化為

this.state = {
    somePropertyFlag: true}

長版:

目前您不應該希望在Reaction中使用嵌套狀態..因為Reaction不適合與嵌套狀態一起工作,所以這里提出的所有解決方案都像黑客一樣。他們不使用框架,而是與之斗爭。他們建議為分組某些屬性的可疑目的編寫不那么清晰的代碼。因此,它們作為對挑戰的回答非常有趣,但實際上是無用的。

讓我們想象一下以下狀態:

{
    parent: {
        child1: 'value 1',
        child2: 'value 2',
        ...
        child100: 'value 100'
    }}

如果只更改child1?Reaction不會重新呈現視圖,因為它使用的是淺比較,它會發現parent財產沒有改變。順便說一句,直接改變狀態對象通常被認為是一種糟糕的做法。

所以你需要重新創造整個parent對象。但在這種情況下,我們將遇到另一個問題。Reaction會認為所有的孩子都改變了他們的價值觀,并且會重新呈現他們所有的價值觀。當然,這對性能不好。

仍然有可能通過編寫一些復雜的邏輯來解決這個問題。shouldComponentUpdate()但我想在這里停止使用簡單的解決方案,從簡短的版本。


查看完整回答
反對 回復 2019-06-26
  • 3 回答
  • 0 關注
  • 720 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號