Попытка сохранить флажок в asyncstorage - PullRequest
Новая
       17

Попытка сохранить флажок в asyncstorage

0 голосов
/ 24 апреля 2020

Я пытаюсь создать реактивное приложение, в котором, если флажок установлен, оно должно сохранять состояние в асинхронном хранилище. Я не могу заставить это работать, так что, надеюсь, кто-то поможет мне. Я новичок в React Native, поэтому в asyncstorage я понятия не имею

Код ниже показывает, как далеко я зашёл, пытаясь понять, как это сделать.

CODE 

import React, { Component } from 'react';
import { CheckBox } from 'react-native-elements'
import { View, Button } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import Fontisto from 'react-native-vector-icons/Fontisto';


export default class Check extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
    };
    this.getData();
  }

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

getData = () => {
  AsyncStorage.getItem("@storage_Key").then((value) => {
      if(value != null){
          this.setState({
              checked:true
          })
      }
  })
}

  render() {
    return (
      <View>
        <CheckBox
          checkedIcon={<Fontisto name='checkbox-active' size={15} color='#000' />}
          uncheckedIcon={<Fontisto name='checkbox-passive' size={15} color='#000' />}
          checked={this.state.checked}
          onPress={() => this.storeData()}
        />
      </View>


    );
  }
}

код pressHandler 

const pressHandler = key => {
    console.log('Todos BEFORE delete');
    console.log(todos);

    const newTodos = todos.filter(todo => todo.key !== key);

    console.log('Todos AFTER delete');
    console.log(todos);

  };

код submitHandler 

const submitHandler = text => {
    if (text.length === 0) return;

    const key = Math.random().toString();

    console.log('Todos BEFORE submit');
    console.log(todos);

    const newTodos = [{ text, key }, ...todos];

    console.log('Todos AFTER submit');
    console.log(todos);

  };

addList это делает так, что когда пользователь нажимает на задачу добавления, он добавляет задачу 

export default function AddList({ submitHandler }) {

    const [text, setText] = useState('');

    const changeHandler = (val) => {
        setText(val);
    }
    const onSubmit = useCallback(() => {
        if (submitHandler) submitHandler(text)
        setText("")
    }, [text])

    return (
        <View style={styles.container}>
            <View style={styles.wrapper}>
                <TextInput
                    style={styles.input}
                    placeholder='What Tododay?'
                    onChangeText={changeHandler}
                    value={text}

                />
                <View>
                    <Feather type='Feather' style={styles.icon} onPress={onSubmit} name='plus-circle' size={40} color='#000' />
                </View>
            </View>
        </View>
    );
}

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

Вы можете использовать Asynstorage из Reaction-native, который прост в использовании, вы можете сделать что-то вроде этого: 

import React, { Component } from 'react';
import { CheckBox } from 'react-native-elements'
import { AsyncStorage, View, Button } from 'react-native';


export default class Check extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
    };
    this.getData();
  }

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

      }
  }

  getData = () => {
    AsyncStorage.getItem("@storage_Key").then((value) => {
        if(value != null){
            this.setState({
                checked:true
            })
        }
    })
  }

  render() {
    return (
      <View style={{flex:1,marginTop:100}}>
      <CheckBox
  center
  title='Click Here'
  checkedIcon='dot-circle-o'
  uncheckedIcon='circle-o'
  checked={this.state.checked}
  onPress={() => this.storeData()}
/>
<Button title="GetData" onPress={this.getData}></Button>
      </View>


    );
  }
}

при утешении значения, которое вы получите value is {"state":true}

Надежда это помогает!

0 голосов
/ 24 апреля 2020

Попробуйте следующее: 

storeData = async () => {
  const state = this.state.checked
  this.setState({ state: true })
  try {
    await AsyncStorage.setItem('@storage_Key', state)
  }
  catch(err) {
    console.log(err)
  }
}

Я беру значение состояния в константе, и если это правда, что он выполняет этот процесс, вы можете передать больше логики c, используя if и else 

async savePlaces() {
  var places = this.state.places
  await AsyncStorage.setItem('places', JSON.stringify(places));
}

Здесь выше приведен код, где я храню местоположения в моем штате 

async getPlaces() {
  var NewArray = await AsyncStorage.getItem('places');
  var places = JSON.parse(NewArray)
  this.setState({ places: places })
}

И здесь я называю их

Удачи

...