Блог

У меня есть приложение, в котором массив извлекается из хранилища и передается на экран

Вот голая версия. Здесь, если GetItem задерживается, после рендеринга экранный массив обновляется автоматически

 import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage'

import Vocabulary from "./Screens/Vocabulary";

export default function App() {
  const [ vocabulary, setVocabulary] = React.useState([]);

  React.useEffect(() => {
    AsyncStorage.getItem('@vocabulary').then(value => setVocabulary(value !=null ? JSON.parse(value) : []) )
  }, []);
    
  return (
    <VocabularyWithEdit vocabulary={vocabulary} />
  );
}
 

Затем я попытался использовать React Navigation и установить массив в initialParams

 import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import Vocabulary from "./Screens/Vocabulary"

export default function App() {
  const [ vocabulary, setVocabulary] = React.useState([]);

  React.useEffect(() => {
    AsyncStorage.getItem('@vocabulary').then(value => setVocabulary(value !=null ? JSON.parse(value) : []) )
  }, []);
  const Stack = createStackNavigator()
    
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Vocabulary" component={Vocabulary} initialParams={{ vocabulary: vocabulary, str: "hey" }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}
 

Но там массив не был обновлен после рендеринга и установлен как [] или когда-то я не определил

Пожалуйста, дайте мне знать, как это исправить и обновить параметры

Я предлагаю передать данные словаря в качестве реквизита компоненту словаря. Если вы предпочитаете использовать начальные параметры, вы можете использовать setParams для их последующего обновления.

Для тех, кто сталкивается с этой проблемой, вы можете использовать children вместо component для передачи реквизитов Screen . Таким образом, когда состояние обновляется в App , обновленные значения будут переданы в Screen .

Например, вместо:

 <Stack.Screen name="Vocabulary" component={Vocabulary} initialParams={{ vocabulary: vocabulary, str: "hey" }}/>
 

используйте это:

 <Stack.Screen name="Vocabulary" children={() => <Vocabulary vocabulary={vocabulary} str="hey" />} />
 

Документы здесь.