反应本机一个变量更新是另一个变量值

Question

我想暂时存储一个状态变量值，只改变临时变量。

在我的代码中，原始变量是 var1，临时变量是 var2。

After update var2 value var1 value is automatically update.

更新 var2 值之前：-

更新 var2 值后：-

我的代码：-

class DemoScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            var1: {
                data:'variable 1 Data'
            },
            var2: {
                data:'variable 2 Data'
            }
        }
    }

    componentDidMount() {
        alert("var1 : " + this.state.var1.data + "\nvar2 : " + this.state.var2.data);
        this.setState({var2:this.state.var1});
    }

    render() {
        return(
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={()=>{
                        var var2 = this.state.var2;
                        var2.data = "value changed";
                        this.setState({var2:var2});
                    }}>
                    <Text>Change Value for var2</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>{
                        alert("var1 : " + this.state.var1.data + "\nvar2 : " + this.state.var2.data);
                    }}>
                    <Text>Display Values</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

为什么会这样？
如何解决？

Answer 1

我认为这里发生的是你将 var2 设置为 var1 的引用而不是它的值，这就是为什么会发生这种情况，你需要做的是替换该行

this.setState({var2:this.state.var1});

这一行：

this.setState({var2: Object.assign({}, this.state.var1)});

使用 Object.assign 将克隆对象的值而不返回其引用。永远记住 Obj1 = Obj2 意味着 Obj1 等于 Obj2 的引用，这意味着它们都认为是同一个对象

反应本机一个变量更新是另一个变量值

react native one variable update is other variable value

variables

updates

react-native