最近创建的对象未保存

问题描述

我正在制作一个成绩计算器应用程序，并且我试图使用AsyncStorage在本地保存数据，以便如果刷新该应用程序，它应该能够加载我在每个主题上拥有的先前信息。我已经创建了保存，加载，useEffect函数；但是，它会保存除最近创建的对象以外的所有对象。这意味着，如果我创建4个“主题”，则只会保存3个；如果我创建5个“主题”，则会保存4个；如果我创建1个“主题”，则会保存0。

起初，我认为这是因为我在添加课程之前就进行了保存，但是我不这么认为，因为我尝试在addCourse（）中调用save（）而没有任何变化。我刚接触JavaScript，因此非常感谢您的帮助！这是我的代码：

Main.js

import React,{ useState,useEffect } from 'react';
import {StyleSheet,View,Text,FlatList,TouchableOpacity,Modal,TouchableWithoutFeedback,Keyboard } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { globalStyles } from '../styles/global';
import Card from '../shared/card';
import { MaterialIcons } from '@expo/vector-icons';
import ReviewForm from '../screens/reviewForm';

export default function Home({navigation}){
    const [modalOpen,setModalOpen] = useState(false);
    
    const [courses,setCourses] = useState([])

    const addCourse = (course) => {
        course.key = Math.random().toString();
        setCourses((currentCourses) => {
            return[course,...currentCourses]
        });
        setModalOpen(false);

        console.log('add course')
        console.log(courses)

    }

    const STORAGE_KEY = '@save_course'

    const save = async() => {
        try{
            console.log('running save');
            await AsyncStorage.setItem(STORAGE_KEY,JSON.stringify(courses))
        } catch(err){
            alert('error')
            console.log(err)
        }

        // console.log(courses)
    };

    const load = async() => {
        try{
            console.log('running load');
            const jsonSubject = await AsyncStorage.getItem(STORAGE_KEY)
            console.log('load await');
            
            if(jsonSubject != null){
                console.log('entered load if');
                setCourses(JSON.parse(jsonSubject));
            }

        } catch(err){
            alert('error')
            console.log(err)
        }
    };

    useEffect(() => {
        console.log('useEffect');
        load()
    },[])


    return(
        <View style={globalStyles.container}>
            <Modal visible={modalOpen} animationType='slide'>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <View style={styles.modalContent}>
                        <MaterialIcons 
                            name='arrow-back'
                            style = {{ ...styles.modalToggle,...styles.modalClose }}
                            size={24}
                            onPress={() => setModalOpen(false)}
                        />
                        <ReviewForm addCourse={addCourse} save={save}/>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
            <FlatList
                style={{flex: 1,backgroundColor: '#efefef'}}
                data={courses}
                renderItem={({ item }) => (
                    <TouchableOpacity onPress={() => navigation.navigate('CourseDetails',item)}>
                        <Card>
                            <Text style={globalStyles.titleText}>{ item.course }</Text> 
                        </Card>
                    </TouchableOpacity>
                )}
            />
            <MaterialIcons 
                name='add'
                size={28}
                style={styles.modalToggle}
                onPress={() => setModalOpen(true)}
            />
        </View>

    )
}

const styles = StyleSheet.create({
    modalToggle:{
        backgroundColor: 'maroon',color: '#efefef',width: 75,height: 75,borderRadius: 50,elevation: 6,padding: 23,alignSelf: 'flex-end',position: 'absolute',right: 15,bottom: 15,},fabIcon: {
        fontSize: 28,color: '#efefef'
    },modalClose:{
        left: 10,marginTop: 30,marginBottom: 10,marginRight: 15,backgroundColor: '#fff',color: '#242424',width: 30,height: 20,borderRadius: 0,elevation: 0,padding: 0,alignSelf: 'flex-start',position: 'relative',modalContent:{
        flex: 1,}
});

reviewForm.js

import React from 'react';
import { StyleSheet,TextInput,Text } from 'react-native';
import { globalStyles } from '../styles/global.js';
import { Formik } from 'formik';
import * as yup from 'yup';
import FlatButton from '../shared/button';


const courseSchema = yup.object({
    course: yup.string()
        .required()
        .min(3),prof: yup.string()
        .min(2),// gpa: yup.string()
    //     .test('is-num-1-10','GPA must be a number between 1 - 10',(val) => {
    //         return parseInt(val) < 11 && parseInt(val) > 0;
    //     })
})

export default function ReviewForm({ addCourse,save }) {
    return(
        <View style={globalStyles.container}>
            <Formik
                initialValues={{ course: '',prof: '' }}
                validationSchema={courseSchema}
                onSubmit={(values,actions ) => {
                    actions.resetForm();
                    console.log('resetForm');
                    addCourse(values);
                    console.log('values');
                    console.log(values);
                    save();
                    console.log('save');
                    
                }}
            >
                {(props) => (
                    <View>
                        <TextInput 
                            style={globalStyles.input}
                            placeholder='Course Name'
                            onChangeText={props.handleChange('course')}
                            value={props.values.course}
                            onBlur={props.handleBlur('course')}
                        />
                        <Text style={globalStyles.errorText}>{ props.touched.course && props.errors.course }</Text>
                        <TextInput 
                            style={globalStyles.input}
                            placeholder='Professor'
                            onChangeText={props.handleChange('prof')}
                            value={props.values.prof}
                            onBlur={props.handleBlur('prof')}
                        />
                        <Text style={globalStyles.errorText}>{ props.touched.prof && props.errors.prof }</Text>                        
                        <FlatButton text='save' onPress={props.handleSubmit} />
                    </View>
                )}
            </Formik>
        </View>
    )
}

解决方法

尝试在FlatList组件上添加extraData属性。

例如：

extraData={this.state}

因此，当状态更改时，平面列表将刷新并显示新项目

,

所以我想出了为什么我的代码从未添加最新课程的问题。原因是因为setState是异步的，而save（）是同步的，所以尽管我在setState之后调用save（），但是它在执行之前就执行过，因此为什么我没有保存最后一个。我修复此问题的方法是复制数组，然后将课程添加到新数组中，以便在调用save（）之前手动添加课程，这样我就知道所有课程都已保存。这是新代码...

const addCourse = (course) => {
        course.key = Math.random().toString();
        newCourses = [course,...courses]
        setCourses(newCourses);
        save(newCourses);    
        setModalOpen(false);
    }

希望这对将来遇到与我相同的问题的人有帮助！