节能状态变量值到另一个恢复功能不起作用

我试图更新一个模式内的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

节能状态变量值到另一个恢复功能不起作用

回答

相关问题