реагировать нативно, одна переменная обновляет значение другой переменной

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, что означает, что оба они считали один и тот же объект