如何解决最近创建的对象未保存
我正在制作一个成绩计算器应用程序，并且我试图使用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);
}
希望这对将来遇到与我相同的问题的人有帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。