最近创建的对象未保存

Question

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

起初，我认为这是因为我在添加课程之前进行了保存，但我不相信是这种情况，因为我尝试在 addCourse() 中调用 save() 并且没有任何变化。我是 JavaScript 的新手，非常感谢您的帮助！这是我的代码：

reviewForm.js

import 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) => {&nbsp; &nbsp; &nbsp; &nbsp; course.key = Math.random().toString();&nbsp; &nbsp; &nbsp; &nbsp; newCourses = [course, ...courses]&nbsp; &nbsp; &nbsp; &nbsp; setCourses(newCourses);&nbsp; &nbsp; &nbsp; &nbsp; save(newCourses);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; setModalOpen(false);&nbsp; &nbsp; }希望这对将来遇到与我相同问题的人有帮助！

Answer 2

尝试在 FlatList 组件上添加 extraData 属性。例如：extraData={this.state}所以当状态改变时，平面列表将被刷新并且新项目将出现