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

问题描述

我想从 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

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

解决方法

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

小吃： 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>
  )
}