我在reactnative中撰寫了應用程式，但AsyncStorage似乎無法正常作業。當我在手機上重新打開應用程式時，它不記得我之前輸入的內容

因此，我按照youtube 教程撰寫了一個待辦事項串列應用程式，但它沒有按預期作業，它不會保存所做的更改，因此當您再次打開該應用程式時，它會啟動，因為什么也沒發生。我使用命令安裝了異步存盤npm i @react-native-async-storage/async-storage并將其與命令鏈接react-native link。也許我鏈接錯了，或者我對此完全陌生。這是 App.js：

import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {SafeAreaView, StyleSheet, View, Text, TextInput, TouchableOpacity, FlatList, Alert} from 'react-native';
const App = () => {
  const [textInput, setTextInput] = React.useState('');
  const [todos, setTodos] = React.useState([]);
  React.useEffect(() =>{
    getTodosFromUserDevice();
  }, [])
  React.useEffect(() => {
    saveTodoTouserDevice(todos);
  }, [todos]);

  const ListItem = ({todo}) => {
    return <View style={styles.listItem}>
      <View style={{flex: 1}}>
        <Text style={{
          fontWeight: 'bold', 
          fontSize: 15, color: '#1f145c', 
          textDecorationLine: todo?.completed ? 'line-through' : 'none'
          }}>
            {todo?.task}
          </Text>
      </View>
      {
        !todo?.completed && (
          <TouchableOpacity style={[styles.actionIcon]} onPress={()=>markTodoComplete(todo?.id)}>
            <Text size={20} color={'#fff'}>Done</Text>
          </TouchableOpacity>
        )}
      <TouchableOpacity style={[styles.actionIco,{backgroundColor: '#f00'}]}onPress={()=>deleteTodo(todo?.id)}>
        <Text size={20} color={'#f00'}>Delete</Text>
      </TouchableOpacity>
    </View>
  };

  const saveTodoTouserDevice = async todos => {
    try {
      const stringifyTodos = JSON.stringify(todos);
      await AsyncStorage.setItem('@todos', stringifyTodos);
    } catch (e) {
      console.log(e);
      // saving error
    }
  };
  const getTodosFromUserDevice = async () => {
    try {
      const todos = await AsyncStorage.getItem('todos');
      if(todos != null){
        setTodos(JSON.parse(todos));
      }
    } catch(error) {
      console.log(error);
    }
  };
  const addTodo = () => {
    if(textInput == ""){
      Alert.alert("Error", "Pleace input task")
    } else{
      const newTodo ={
        id: Math.random(),
        task: textInput,
        completed: false,
      };
      setTodos([...todos, newTodo]);
      setTextInput('');
    }
  };

  const markTodoComplete = (todoId) => {
  const newTodos = todos.map((item)=>{
    if(item.id== todoId){
      return {...item, completed:true}
    }
    return item;
  });
  setTodos(newTodos);
  };
  const deleteTodo = (todoId) =>{
    const newTodos = todos.filter(item => item.id != todoId);
    setTodos(newTodos);
  };
  const clearTodos = () => {
    Alert.alert('Confirm', 'Clear todos?', [
      {
        text: 'Yes',
        onPress:() => setTodos([]),
      },
      {text:'No'},
    ])
  }
  return <SafeAreaView style={styles.safearea}>
    <View style={styles.header}>
      <Text style={styles.title}>ToDo List</Text>
      <Text size={25} color="#f00" onPress={clearTodos}>Delete</Text>
    </View>
    <FlatList 
    showsHorizontalScrollIndicator={false}
      contentContainerStyle={{padding:20, paddingBottom: 100}}
      data={todos} 
      renderItem={({item}) => <ListItem todo={item} />}  />
    <View style={styles.footer}>
      <View style={styles.inputContainer}>
        <TextInput placeholder="Add Task" value={textInput} onChangeText={(text)=>setTextInput(text)}/>
      </View>
      <TouchableOpacity onPress={addTodo}>
        <View style={styles.iconContainer}>
          <Text color={'#fff'} size={30}>Add</Text>
        </View>
      </TouchableOpacity>
    </View>
    
  </SafeAreaView>
};
const styles = StyleSheet.create({
  actionIcon:{
    height: 25,
    width: 25,
    backgroundColor: '#008000',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 5,
    borderRadius: 3,
  },
  listItem:{
    padding: 20,
    backgroundColor: '#fff',
    flexDirection: 'row',
    elevation: 20,
    borderRadius: 7,
    marginVertical: 10,
  },
  safearea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header:{
    padding: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',

  },
  title:{
    fontWeight: 'bold',
    fontSize: 20,
    color: '#1f145c',
  },
  footer:{
    position: 'absolute',
    bottom: 0,
    backgroundColor: '#fff',
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  inputContainer:{
    backgroundColor: '#fff',
    elevation: 40,
    flex: 1,
    height: 50,
    marginVertical: 20,
    marginRight: 20,
    borderRadius: 30,
    paddingHorizontal: 20,
  },
  iconContainer:{
    height: 50,
    width: 50,
    backgroundColor: '#1f145c',
    borderRadius: 25,
    elevation: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
})
export default App;

這是整個專案檔案夾GDrive 鏈接的 Google Drive 鏈接

uj5u.com熱心網友回復：

您的代碼中有錯字

你用這行代碼設定了一個專案

await AsyncStorage.setItem('@todos', stringifyTodos);

并得到這條線

const todos = await AsyncStorage.getItem('todos');

您需要洗掉 setItem 中的 @ 或將其添加到 getItem

標籤：安卓 反应式 异步存储

上一篇：onSwipeableOpen立即呼叫，無需觸發或滑動操作

下一篇：反應本機文本輸入參考打字稿