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

Question

我想从 AsyncStorage 获取项目，然后将其传递给我的组件，但由于某种原因，它先传递参数，然后完成 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/@marcpope/vocabulary

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

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

How to get params from AsyncStorage before the passing them to a component?

javascript

react-native

asyncstorage

expo