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

我想从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} />;
}

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;

---

如果您知道发生这种情况的原因，以及我如何将更改后的参数传递给组件，请告诉我原因是它仍在等待数据

小吃：

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} />;
}

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>
  )
}