首頁猿問如何更新Reaction中的嵌套狀態屬性

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

JavaScript React.JS

慕的地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 關注
727 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

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

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

3 回答

添加回答