I have a really weird problem in a setState in react native. Probably because I came from reactJS and maybe i'm not using the best practices in react native.
Here the code:
import React, { Component, useState } from 'react';
import { ScrollView, Alert, View, Text } from 'react-native';
import { Button, Input } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import {AppStyles, ButtonStyles, InputStyles, UtilStyles, LoginRegistrationStyles} from '../styles/Main';
import { RegisterStyles } from '../styles/Register';
import Utils from "../utils/Utils";
export default class RegisterScreen extends Component {
static navigationOptions = {
title: 'Registrazione',
};
constructor(props) {
super(props);
this.state = {
loading: false,
infoUser:{}
}
}
onTextChange = (text, key) => {
console.log("original text:" + text);
const fakeState = Utils.deepCopy(this.state);
fakeState.infoUser[key] = text.toUpperCase();
this.setState(fakeState);
console.log("new text:" + fakeState.infoUser[key]);
}
render() {
return (
<ScrollView contentContainerStyle={[AppStyles.container, UtilStyles.p20]}
keyboardShouldPersistTaps="handled">
<Input containerStyle={InputStyles.containerInput}
inputStyle={InputStyles.input}
inputContainerStyle={InputStyles.inputContainer}
leftIconContainerStyle={InputStyles.inputIcon}
underlineColorAndroid='transparent'
placeholder="Codice fiscale"
value={this.state.infoUser.cf}
keyboardType="default"
onChangeText={(text)=>this.onTextChange(text,"cf")}
leftIcon={
<Icon
name='user'
size={24}
color='black'
/>
} />
</ScrollView>
);
}
register() {
}
}
then in the real device I entered those cases, with the relativies console logs:
A
original text:A
new text:A
Ab
original text:Ab
new text:AB
Abc
original text:ABAbc
new text:ABABC
It seems something about the manipulation of an object by ref and not by val, since after modified the input text even the original one is changed. I also tried to copy the original text in a variable, so I referred to the new variable (I used a function of mine, deepCopy, which return a perfect copy of the input object but without his pointers) but nothing changed..