節能狀態變量值到另一個恢復功能不起作用

我試圖更新一個模式內的people陣列。如果用戶點擊取消按鈕，當我點擊「打開模式」時，它會將狀態人員數組恢復爲其先前的值。

因此，基本上，我所做的是在單擊打開模式按鈕時，將人員數組分配給另一個名爲cachedPeople this.setState({ visible: true, cachedPeople: this.state.people })的變量。

「奔的更改年齡」按鈕有此onPress：

onPress={() => { 
    const newPeople = [...this.state.people]; 
    newPeople[2].age = 20; 
    this.setState({ 
    people: newPeople, 
    }); 
}}

和取消我設置人陣cachedPeople

this.setState({ visible: false, people: this.state.cachedPeople });

但this.state.cachedPeople值也成爲this.state.people更新值之前單擊取消按鈕因此恢復不會發生我不知道這是怎麼回事

我試過了遠遠是將它保存在this.cachedPeople而不是狀態，但仍然發生。

繼承人的示例代碼要點：https://gist.github.com/damathryx/4a379d3c8919ee6431ee79b7a58426c9

來源

2017-08-27 Damathryx

如果你這樣做上述方式會發生什麼？本仍然保持在20？ – 82Tuskers

@ 82Tuskers謝謝！更新了gif和細節。 – Damathryx

-1

你要克隆。人員和緩存人員指向相同的資源。所以，我會

//not the best way to clone but ... 
this.setState({ visible: true, cachedPeople: JSON.parse(JSON.stringify(this.state.people))});

而且，

onPress={() => { 
    const newPeople = [...this.state.people]; 
    newPeople[2].age = 20; 
    this.setState({ 
    people: newPeople, 
    cachedPeople: this.state.cachedPeople 
    }); 
}}

而且，

this.setState({ visible: false, people: this.state.cachedPeople });

請讓我知道，如果你的作品。

來源

2017-08-27 17:54:36 82Tuskers

但是，我不確定我們如何在這裏編輯'const' newPeople。 – 82Tuskers

謝謝！但是因爲我使用lodash，所以我使用了_.cloneDeep。 – Damathryx

不錯！是的'_'庫確實是一個更好的解決方案。 – 82Tuskers

克隆負責任

你不應該克隆整個狀態;這是沒有意義的，如果你知道你只是更新一個對象

const state = 
 
    [ {age: 10}, {age: 11}, {age: 12}, {age: 13}, {age: 14} ] 
 
    
 
const nextState = 
 
    [ 
 
    ...state.slice (0,2), 
 
    { ...state [2], age: 20 }, 
 
    ...state.slice (2) 
 
    ] 
 
    
 
console.log (state) 
 
// [ {age: 10}, {age: 11}, {age: 12}, {age: 13}, {age: 14} ] 
 

 
console.log (nextState) 
 
// [ {age: 10}, {age: 11}, {age: 20}, {age: 13}, {age: 14} ]

可能看起來像在你的程序是什麼（用變量index和age）

onPress={() => 
    this.setState ({ 
    people: [ 
     ...this.state.people.slice (0,index), 
     { ...this.state.people [index], age }, 
     ...this.state.people.slice (index) 
    } 
    })}

堅持不懈

當然，編寫沒有持久數據結構的功能程序是很痛苦的，這就是爲什麼我們有像Mori或更受歡迎的Immutable這樣的東西 - 這裏是一個使用Immutable的例子。我們使用toJS()轉換回原始Array和Object類型

const {List, Map} = 
    require ('immutable') 

const state = 
    [ {age: 10}, {age: 11}, {age: 12}, {age: 13}, {age: 14} ] 

const nextState = 
    List (state) .set (2, 
    Map (state [2]) .set ('age', 20) .toJS()) .toJS() 

console.log (state) 
// [ { age: 10 }, { age: 11 }, { age: 12 }, { age: 13 }, { age: 14 } ] 

console.log (nextState) 
// [ { age: 10 }, { age: 11 }, { age: 20 }, { age: 13 }, { age: 14 } ]

來源

2017-08-29 05:51:06 naomik

節能狀態變量值到另一個恢復功能不起作用

回答

相關問題