Сохранение списка с AsyncStorage

Question

Итак, я создал приложение «Блокнот» и хочу сделать так, чтобы текст, который написал пользователь и т. Д. c, должен был быть сохранен, чтобы текст не сбрасывался при выходе пользователя из приложения.

Я новичок в реакции-родной, после нескольких поисков в Google мне нужно AsyncStorage? чтобы это произошло. но на самом деле не знаю, как это сделать.

import React, { useState } from 'react';
import { 
StyleSheet, 
Text, 
View, 
FlatList, 
TouchableWithoutFeedback, 
TouchableOpacity,
Keyboard,
AsyncStorage
} from 'react-native';
import Header from './components/header';
import ListItem from './components/listitem';
import AddList from './components/addlist';

export default function App() {

    const [todos, setTodos] = useState([

    ]);

    const pressHandler = (key) => {
      setTodos((prevTodos) => {
      return prevTodos.filter(todo => todo.key != key);
     });
    }

    const submitHandler = (text) => {
      if(text.length > 0) {
        setTodos((prevTodos) => {
        return [
       { text: text, key: Math.random().toString() },
      ...prevTodos
     ];
   })
   } 
  }

 return (
  <TouchableWithoutFeedback onPress={() => {
    Keyboard.dismiss();
   }}>
  <View style={styles.container}>
    <Header />
     <View style={styles.content}>
      <AddList  submitHandler={submitHandler} />
       <View style={styles.todoList}>
        <FlatList 
          data={todos}
            renderItem={({ item }) => (
            <ListItem item={item} pressHandler={pressHandler} />
           )}
        />
      </View>
     </View>
   </View>
 </TouchableWithoutFeedback>
  );
  }

новая проблема из ниоткуда прекрасно работала до того, как была решена без прикосновения к коду

    const pressHandler = key =>
      setTodos(prevTodos => {
       const newTodos = prevTodos.filter(todo => todo.key !== key);

      storeTodosInAsync(newTodos);

      console.log(prevTodos);
    return newTodos;

    });


const submitHandler = text => {
  if (text.length > 0) {
      const key = Math.random().toString();
        setTodos(prevTodos => {
        const newTodos = [{ text, key }, ...prevTodos];

        storeTodosInAsync(newTodos);
        console.log(newTodos);
        return newTodos;
     });
   }
 };

Answer 1

Вы можете использовать AsyncStorage для хранения и загрузки данных в / из локального хранилища. Следует отметить, что данные ДОЛЖНЫ быть строкой, поэтому все, что угодно, например объект, который не является строкой, должно быть преобразовано в строку. Вы можете использовать JSON.stringify(...) для этого. И затем, когда вы вернете строку обратно, вы можете использовать JSON.parse(...), чтобы преобразовать ее обратно в объект.

Итак, чтобы преобразовать ваш текущий код во что-то, что автоматически загружает сохраненные задачи и всегда сохраняет последние, вы можете написать это:

import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Keyboard,
  AsyncStorage,
  Button
} from 'react-native';
import Header from './components/header';
import ListItem from './components/listitem';
import AddList from './components/addlist';

export default function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    restoreTodosFromAsync();
  }, []);

  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);

    setTodos(newTodos);
    storeTodosInAsync(newTodos);
  };

  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);

    setTodos(newTodos);
    storeTodosInAsync(newTodos);
  };

  const asyncStorageKey = '@todos';

  const storeTodosInAsync = newTodos => {
    const stringifiedTodos = JSON.stringify(newTodos);

    AsyncStorage.setItem(asyncStorageKey, stringifiedTodos).catch(err => {
      console.warn('Error storing todos in Async');
      console.warn(err);
    });
  };

  const restoreTodosFromAsync = () => {
    AsyncStorage.getItem(asyncStorageKey)
      .then(stringifiedTodos => {
        console.log('Restored Todos:');
        console.log(stringifiedTodos);

        const parsedTodos = JSON.parse(stringifiedTodos);

        if (!parsedTodos || typeof parsedTodos !== 'object') return;

        setTodos(parsedTodos);
      })
      .catch(err => {
        console.warn('Error restoring todos from async');
        console.warn(err);
      });
  };

  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        <Header />
        <View style={styles.content}>
          <AddList submitHandler={submitHandler} />
          <View style={styles.todoList}>
            <FlatList
              data={todos}
              renderItem={({ item }) => <ListItem item={item} pressHandler={pressHandler} />}
            />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
}