最近创建的对象未保存

Question

我正在制作一个成绩计算器应用程序，我正在尝试使用 AsyncStorage 在本地保存我的数据，这样如果应用程序被刷新，它应该能够加载我在每个主题上的先前信息。我已经创建了我的保存、加载、useEffect 函数；但是，它会保存除最近创建的对象之外的所有对象。这意味着如果我创建 4 个“主题”，它只会节省 3 个；如果我创建 5 个“主题”，它会节省 4 个；如果我创建 1 个“主题”，它会保存 0。起初，我认为这是因为我在添加课程之前进行了保存，但我不相信是这种情况，因为我尝试在 addCourse() 中调用 save() 并且没有任何变化。我是 JavaScript 的新手，非常感谢您的帮助！这是我的代码：reviewForm.jsimport React from 'react';import { StyleSheet, TextInput, View, 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')}                    </View>                )}            </Formik>        </View>    )}

Answer 1

所以我想出了为什么我的代码从未添加最新课程的问题。原因是因为setState是异步的，而save()是同步的，所以虽然我在setState之后调用了save()，但是之前已经在执行了，所以最后一个没有保存。我解决这个问题的方法是复制我的数组，并将课程添加到新数组，这样我在调用 save() 之前手动添加我的课程，所以我知道我所有的课程都被保存了。这是新代码...

const addCourse = (course) => {

        course.key = Math.random().toString();

        newCourses = [course, ...courses]

        setCourses(newCourses);

        save(newCourses);    

        setModalOpen(false);

    }

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

Answer 2

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

例如：

extraData={this.state}

所以当状态改变时，平面列表将被刷新并且新项目将出现