使用 AsyncStorage 保存列表

Question

所以我做了一个 "notepad" 应用程序，我想这样做应该保存用户写的文本等，这样当用户退出应用程序时文本不会被重置。

我是 react-native 的新手，经过几次 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 来存储和加载数据 to/from 本地存储。需要注意的一件事是数据必须是一个字符串，所以任何像不是字符串的对象都需要被字符串化。您可以使用 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>
      );
    }

使用 AsyncStorage 保存列表

Saving list with AsyncStorage

react-native

asyncstorage