Question

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

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

更新后var2值var1值会自动更新。

更新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的引用，这意味着他们两个都认为是同一对象

反应本地一个变量更新是其他变量值

1 个答案: