mercredi 22 juin 2022

CheckBox state saved on async Storage but checkbox is not saved

I've been trying to do this little demo for AsyncStorage, I can save a Profile successfully (username and password) but the checkbox is the problem, the value is saved successfully as true but the checkbox returns to false every time you refresh.

This is the App.js:

/* eslint-disable no-undef */
/* eslint-disable react-native/no-inline-styles */
// In App.js in a new project
import React, { useState, useEffect }from 'react';
//import type { Node } from 'react';
import {
  TextInput,
  Button,
  View
} from 'react-native';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import AsyncStorage from '@react-native-async-storage/async-storage';
import BouncyCheckbox from "react-native-bouncy-checkbox";


class App extends React.Component {
  static navigationOptions = { headerShown: false };

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      checked: false
    }
    this.getData();
  }

  componentDidMount () {
    console.log('success')
  }


  onSubmit = async () => {
    try {
      await AsyncStorage.setItem('userprofile', JSON.stringify({
        username: this.state.username,
        password: this.state.password
      }))

      console.log('Username saved =====> ', this.state.username)
      console.log('Password saved =====> ', this.state.password)
      console.log('State Checkbox saved =====> ', this.state.checked)
    } catch (e) {
      console.log(e)
    }
  }

  storeData = () => {
    this.setState(prevState => ({ checked: !prevState.checked }))
    if (this.state.checked == true) {
      AsyncStorage.setItem("@storage_Key", JSON.stringify(this.state.checked));
      console.log('State Checkbox saved =====> ', this.state.checked)
    }
  }

  getData = async () => {
    try {
      //Asyn state on full profile
      const userprofile = await AsyncStorage.getItem('userprofile')
      const _userprofile = JSON.parse(userprofile)

      if (_userprofile !== null) {
        this.setState({ ..._userprofile })
      }

      AsyncStorage.getItem("@storage_Key").then((value) => {
      if (value != null) {
        this.setState({
          checked: true
        })
        console.log('State Checkbox recovered 3: ', this.state.checked)
      }
    })
    console.log('State Checkbox recovered 2: ', this.state.checked)


      console.log('Username recovered: ', this.state.username)
      console.log('Password recovered: ', this.state.password)
      console.log('State Checkbox recovered: ', this.state.checked)
    } catch (e) { console.log(e) }
  }

  clearData = async () => {
    try {
      await AsyncStorage.clear();
      console.log('Credenciales eliminadas')
    } catch (e) { console.log(e) }
  }




  render() {
    return (
      <View style=>
        <View style=></View>
        <KeyboardAwareScrollView>
          <View style=>
            <View style=>
              <TextInput
                placeholder="E-Mail..."
                value={this.state.username}
                onChangeText={val => this.setState({ username: val })}
              />
            </View>
            <View style=>
              <TextInput
                placeholder="Password..."
                value={this.state.password}
                onChangeText={val => this.setState({ password: val })}
              />
            </View>
            <View style=></View>
            <BouncyCheckbox
              fillColor="red"
              unfillColor="#FFFFFF"
              text="Recuérdame"
              isChecked={this.state.checked}
              onPress={() => this.storeData}
            />
            <View style=></View>
            <Button title="Submit Login" onPress={this.onSubmit} />
            <Button title="Clean" onPress={this.clearData} />
          </View>
        </KeyboardAwareScrollView>
      </View>
    );
  }
}

export default App;

The purpose on this demo is to be able to remember the credentials like username and password when the checkbox is toggled and to clear them when untangle it. Any help or corrections you can point would be appreciated.




Aucun commentaire:

Enregistrer un commentaire