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

【问题标题】：How to get params from AsyncStorage before the passing them to a component?如何在将参数传递给组件之前从 AsyncStorage 获取参数？
【发布时间】：2021-01-06 18:30:59
【问题描述】：

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

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

【问题讨论】：

标签： javascript react-native expo asyncstorage

【解决方案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>
  )
}

【讨论】：