"我在 React Native 中遇到了关于异步存储的问题"

Question

i am facing a problem regarding async storage in react native .

import { StatusBar } from 'expo-status-bar';
import {
  StyleSheet,
  Text,
  View,
  KeyboardAvoidingView,
  FlatList,
  TextInput,
  TouchableOpacity,
  Keyboard,
} from 'react-native';
import React, { Component } from 'react';
import * as Font from 'expo-font';
import Task from './components/Task';
import AppLoading from 'expo-app-loading';
import AsyncStorage from '@react-native-async-storage/async-storage';

let customFonts = {
  Poppins_SemiBold: require('./assets/Poppins-SemiBold.ttf'),
  Poppins_Regular: require('./assets/Poppins-Regular.ttf'),
};

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      task: '',
      taskItems: [],
      fontsLoaded: false,
    };
  }
  async _loadFontsAsync() {
    await Font.loadAsync(customFonts);
    this.setState({ fontsLoaded: true });
  }
  componentDidMount() {
    this._loadFontsAsync();
    this._retrieveData()
  }
  _retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('data');
    if (value.length !== 2) {
      // We have data!!
      this.setState({taskItems:[...JSON.parse(value)]})
      console.log(value);
    }
    
   
  } catch (error) {
    // Error retrieving data
    console.log(error)
  }
};
  handleAddTask=()=>{
    Keyboard.dismiss()
    this.setState({taskItems:[...this.state.taskItems,this.state.task]})
    this.setState({task:''})
    AsyncStorage.setItem('data',JSON.stringify(this.state.taskItems))
  }
  deleteItem=(index)=>{
    try {
      let arr = [...this.state.taskItems];
      arr.splice(index, 1);
      this.setState({taskItems:arr})
      AsyncStorage.setItem('data',JSON.stringify(arr))
      
      
    } catch (err) {
      console.log(err);
    }
  }
  render() {
    if (!this.state.fontsLoaded) {
      return <AppLoading />;
    }

    return (
      <View style={styles.container}>
        {/* Todays Tasks */}

        <View style={styles.taskWrapper}>
          <Text style={styles.sectionTitle}>Today's Tasks</Text>
          <View style={styles.items}>
            {/* This is where the tasks will go! */}
            <FlatList
              data={this.state.taskItems}
              keyExtractor={(item) => item}
              renderItem={({ item, index }) => (
                <Task text={item} handleDelete={() => this.deleteItem(index)} />
              )}
            />
          </View>
        </View>

        {/* Write a Task */}
        <KeyboardAvoidingView style={styles.writeTaskWrapper}>
          <TextInput
            style={styles.input}
            placeholder={'Write A Task!'}
            onChangeText={(text) => {
              this.setState({ task: text });
            }}
            value={this.state.task}
          />
          <TouchableOpacity
            onPress={() => {
              this.handleAddTask();
            }}>
            <View style={styles.addWrapper}>
              <Text style={styles.addText}>+</Text>
            </View>
          </TouchableOpacity>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E8EAED',
  },
  taskWrapper: {
    paddingTop: 80,
    paddingHorizontal: 20,
  },
  sectionTitle: {
    fontSize: 24,
    backgroundColor: '#fff',
    fontFamily: 'Poppins_SemiBold',
    borderRadius: 10,
    margin: 'auto',
    width: 250,
    height: 60,
    textAlign: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 5,
    paddingTop: 10,
  },
  items: {
    marginTop: 30,
  },
  writeTaskWrapper: {
    position: 'absolute',
    bottom: 60,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  input: {
    paddingVertical: 15,
    paddingHorizontal: 15,
    backgroundColor: '#fff',
    borderRadius: 60,
    width: 250,

    fontFamily: 'Poppins_Regular',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 3,
  },
  addWrapper: {
    width: 60,
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 60,
    justifyContent: 'center',
    alignItems: 'center',

    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 3,
  },
  addText: {},
});

Answer 1

Due to React internal state update implementation, update Async storage run before new state updated. It's recommended to run asynchronous code before updating the state.

handleAddTask= async ()=>{
   Keyboard.dismiss()
   const updatedTaskItems = [...this.state.taskItems,this.state.task]
   await  AsyncStorage.setItem('data',JSON.stringify(updatedTaskItem))
   this.setState({taskItems:updatedTaskUtems,task:''})
    
  }