Передать ответ Fetch API на Stack.Screen в React Navigation

Question

Я создаю приложение, которое имеет один вызов API в начале приложения, который содержит все данные для приложения. Затем я использую React Navigation для перехода к главному экрану (и другим экранам). Я пытаюсь передать данные из вызова API на главный экран, но я не получаю их в своем элементе Home.

Код выглядит так:

App. js

export default function App() {

const [responseJson, setResponseJson] = useState([])

async function fetchData() {
  await fetch('http://api.xxx.com/')
  .then(response => response.json())
  .then(responseJson => {
    setResponseJson(responseJson);
  })
}
return (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" response={responseJson} component={Home} options={{headerShown:false}}/>
    </Stack.Navigator>
  </NavigationContainer>
);

Home. js

export const Home = (props) => {
  return(
    <View style={styles.container}>
    {console.log(props)}
    </View>
  )
}

console.log предоставляет мне Object с navigation и route, но без response. Как мне go передать данные на главный экран?

Answer 1

Вы можете использовать ловушку useEffect из React. Но я не уверен, что вы их получите, передав таким образом в Stack.Screen. Я думаю, это должно быть примерно так:

<Stack.Screen name="Home" component={props => <Home {...props} response={responseJson}/>} options={{headerShown:false}}/>

Пример хука:

React.useEffect(() => {
    async function fetchData() {
      await fetch('http://api.xxx.com/')
      .then(response => response.json())
      .then(responseJson => {
        setResponseJson(responseJson);
      })
    }
    fetchData()
    // cleanup function if needed, on unmount
    // return () => doSomeCleanUp()
},[])