我正在努力在 React Native 中构建一个具有异步存储的数组，异步存储的所有教程和文档页面都非常基础，并且没有提供过去设置项目然后获取它的太多信息，我是编程新手这是我的第一个项目，所以我很挣扎
const Body = ({ navigation }) => {
const [WorkoutsName, setWorkoutName] = useState();
const [WorkoutSets, setWorkoutSets] = useState();
const [WorkoutReps, setWorkoutReps] = useState();
const [WorkoutWeight, setWorkoutWeight] = useState();
let workoutSlide = [
{
name: WorkoutsName,
sets: WorkoutSets,
reps: WorkoutReps,
weight: WorkoutWeight,
}
]
const load = async () => {
try {
const name = AsyncStorage.getItem("WorkoutName");
const sets = AsyncStorage.getItem("WorkoutSets");
const reps = AsyncStorage.getItem("WorkoutReps");
const weight = AsyncStorage.getItem("WorkoutWeight");
setWorkoutName(name);
setWorkoutSets(sets);
setWorkoutReps(reps);
setWorkoutWeight(weight);
console.log(workoutSlide);
} catch (error) {
alert(error)
}
};
这是我迄今为止创建数组的尝试，但我的模拟器上不断收到错误消息，提示要创建数组
const WorkoutTile = ({ navigation }) => {
const [WorkoutsName, setWorkoutName] = useState();
const [WorkoutSets, setWorkoutSets] = useState();
const [WorkoutReps, setWorkoutReps] = useState();
const [WorkoutWeight, setWorkoutWeight] = useState();
const onSubmit = async () => {
try {
AsyncStorage.setItem("WorkoutName", JSON.stringify(WorkoutsName));
AsyncStorage.setItem("WorkoutSets", JSON.stringify(WorkoutSets));
AsyncStorage.setItem("WorkoutReps", JSON.stringify(WorkoutReps));
AsyncStorage.setItem("WorkoutWeight", JSON.stringify(WorkoutWeight));
navigation.navigate("Body");
} catch (error) {
alert(error)
}
这是我的锻炼页面，我在其中使用文本输入设置数据，我希望它类似于待办事项列表，在其中添加包含名称、组数、次数和重量的锻炼，然后在主页上创建一个图块以显示该数据
当我设置数据时，它会更改我最初输入的数据，但只有当我使用 expo 重新加载应用程序时，但我希望它在每次添加新锻炼时添加一个新图块，我只是不能似乎我的头都围绕着数组
您尝试使用 AsyncStorage 创建数组并在 React Native 中更新它似乎走在正确的轨道上。但是，您的代码需要一些改进和更正。
您可以使用展开运算符来维护之前的幻灯片数组并向其中添加新幻灯片。这样，新幻灯片将被追加到现有数组中，而不会覆盖以前的值。
下面是加载函数的一小段：
const load = async () => {
try {
const name = await AsyncStorage.getItem('WorkoutName');
const sets = await AsyncStorage.getItem('WorkoutSets');
const reps = await AsyncStorage.getItem('WorkoutReps');
const weight = await AsyncStorage.getItem('WorkoutWeight');
if (name && sets && reps && weight) {
setWorkoutSlides((prevSlides) => [
...prevSlides,
{
name: name,
sets: sets,
reps: reps,
weight: weight,
},
]);
}
} catch (error) {
alert(error);
}
};
const Workout = ({ navigation }) => {
const [WorkoutsName, setWorkoutName] = useState();
const [WorkoutSets, setWorkoutSets] = useState();
const [WorkoutReps, setWorkoutReps] = useState();
const [WorkoutWeight, setWorkoutWeight] = useState();
const onSubmit = async () => {
try {
AsyncStorage.setItem("WorkoutName", JSON.stringify(WorkoutsName));
AsyncStorage.setItem("WorkoutSets", JSON.stringify(WorkoutSets));
AsyncStorage.setItem("WorkoutReps", JSON.stringify(WorkoutReps));
AsyncStorage.setItem("WorkoutWeight", JSON.stringify(WorkoutWeight));
navigation.navigate("Body");
} catch (error) {
alert(error)
}
};
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.Container}>
<TextInput style={styles.textInput} maxLength={28} placeholder="Workout" onChangeText={value => setWorkoutName(value)}></TextInput>
<TextInput style={styles.textInput} keyboardType="number-pad"
maxLength={2}
placeholder="Sets"
onChangeText={value => setWorkoutSets(value)}></TextInput>
<TextInput style={styles.textInput} keyboardType="number-pad" maxLength={2} placeholder="Reps" onChangeText={value => setWorkoutReps(value)}></TextInput>
<TextInput style={styles.textInput} keyboardType="number-pad" maxLength={3} placeholder="Weight" onChangeText={value => setWorkoutWeight(value)}></TextInput>
<View style={styles.button}>
<TouchableOpacity onPress={onSubmit}>
<Text style={styles.buttonText}>Add to Workout</Text>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
);
};const Body = ({ navigation }) => {
const [WorkoutsName, setWorkoutName] = useState();
const [WorkoutSets, setWorkoutSets] = useState();
const [WorkoutReps, setWorkoutReps] = useState();
const [WorkoutWeight, setWorkoutWeight] = useState();
const load = async () => {
try {
const name = AsyncStorage.getItem("WorkoutName");
const sets = AsyncStorage.getItem("WorkoutSets");
const reps = AsyncStorage.getItem("WorkoutReps");
const weight = AsyncStorage.getItem("WorkoutWeight");
setWorkoutName(name);
setWorkoutSets(sets);
setWorkoutReps(reps);
setWorkoutWeight(weight);
if (name && sets && reps && weight) {
setWorkoutSlides((prevSlides) => [
...prevSlides,
{
name: name,
sets: sets,
reps: reps,
weight: weight,
},
]);
}
console.log(prevSlide)
} catch (error) {
alert(error)
}
};
deleteWorkout = () => {
AsyncStorage.removeItem("WorkoutName");
AsyncStorage.removeItem("WorkoutSets");
AsyncStorage.removeItem("WorkoutReps");
AsyncStorage.removeItem("WorkoutWeight");
setWorkoutName("");
setWorkoutSets("");
setWorkoutReps("");
setWorkoutWeight("");
};
useEffect(() => {
load();
}, []);
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.bodyContainer}>
<View style={styles.topItem}>
<Text style={styles.workoutName}>WorkoutName</Text>
<View style={styles.srwTitles}>
<Text style={styles.workoutSets}>Sets</Text>
<Text style={styles.workoutReps}>Reps</Text>
<Text style={styles.workoutWeight}>Weight</Text>
</View>
</View>
<View style={styles.workoutTile}>
<TouchableOpacity onPress={deleteWorkout}>
<View style={styles.topItem}>
<Text style={styles.workoutName}>{WorkoutsName}</Text>
<View style={styles.srwTitles}>
<Text style={styles.workoutSets}>{WorkoutSets}</Text>
<Text style={styles.workoutReps}>{WorkoutReps}</Text>
<Text style={styles.workoutWeight}>{WorkoutWeight}</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={styles.bottomBar}>
<View style={styles.modalWeight}>
</View>
<View style={styles.button}>
<TouchableOpacity onPress={() => navigation.navigate("AddWorkout")}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
}这些是我的 2 个页面，当我将鼠标悬停在 setWorkoutSlides 上时，它会显示一条错误消息，提示“找不到名称“setWorkoutSlides”。您的意思是“setWorkoutSets”吗？”