如何在将参数传递给组件之前从AsyncStorage获取参数

Question

我想从AsyncStorage中获取项目，然后将其传递给我的组件，但由于某种原因，它首先传递param，然后完成getData((

App.js:

import React from 'react';
import Vocabulary from "./Screens/Vocabulary";
import AsyncStorage from '@react-native-async-storage/async-storage'
export default function App() {
var vocabulary = []
const getData = async () => {
try {
const value = await AsyncStorage.getItem('@vocabulary')
vocabulary = value != null ? JSON.parse(value) : [];
console.log(vocabulary)
} catch(e) {}
}  

getData()

return <Vocabulary vocabulary={vocabulary} />;
}

VocabularyScreen.js:

import React from 'react';
import { View, SafeAreaView, TouchableOpacity } from 'react-native';
import styles from "./styles";
import { Feather } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function VocabularyScreen({ vocabulary }) {
console.log(vocabulary)
const Plus = async () => {
vocabulary.push({ word: "", translation: "", description: ``, isMarked: false });
await AsyncStorage.setItem('@vocabulary', JSON.stringify(vocabulary))
}

//SCREEN
return (
<View style={styles.container}> 
<TouchableOpacity onPress={Plus}>
<Feather name="plus" size={40} color="#3D5201" />
</TouchableOpacity>
</View>
)
}  

按下3次按钮并重新启动后的控制台：

[] //log from VocabularyScreen.js
(3) [{...}, {...}, {...}] //log from App.js

如果你知道为什么会发生这种情况，以及我如何将更改后的参数传递给组件，请告诉我

Answer 1

原因是它仍在等待数据。。。

小吃：https://snack.expo.io/@marcope/词汇

App.js:

import React, {useEffect} from 'react';
import Vocabulary from "./screens/Vocabulary";
import AsyncStorage from '@react-native-async-storage/async-storage'
const App = () => {
const [ vocabulary, setVocabulary] = React.useState(null);
useEffect(() => {
AsyncStorage.getItem('@vocabulary').then((value) => {
setVocabulary(JSON.parse(value));
console.log('app:',value)
})
}, []);
if(!vocabulary) {
return null;
}

return (
<Vocabulary vocabulary={vocabulary} />
);
}
export default App;

和人声屏幕：

import React from 'react';
import { View, SafeAreaView, TouchableOpacity } from 'react-native';
import { Feather } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Vocabulary(vocabulary) {
console.log('vocab screen: ', vocabulary)
const Plus = async () => {
vocabulary.push({ word: "hello", translation: "ola", description: 'n/a', isMarked: false });
await AsyncStorage.setItem('@vocabulary', JSON.stringify(vocabulary))
}

//SCREEN
return (
<View > 
<TouchableOpacity onPress={Plus}>
<Feather name="plus" size={40} color="#3D5201" />
</TouchableOpacity>
</View>
)
}