在 React Navigation 中将 Fetch API 响应传递给 Stack.Screen答案

【问题标题】：Pass Fetch API Response to Stack.Screen in React Navigation在 React Navigation 中将 Fetch API 响应传递给 Stack.Screen
【发布时间】：2021-07-14 03:50:42
【问题描述】：

我正在构建一个应用程序，它在应用程序的开头有一个 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 为我提供了带有 navigation 和 route 密钥的 Object，但没有 response 密钥。我将如何将数据传递到主屏幕？

【问题讨论】：

这不是它的工作方式。道具没有钻到屏幕上。你最好在屏幕本身中获取数据
我正在尝试只进行一次 API 调用（而不是在每个屏幕上调用一次）并将该信息传递到相关屏幕
你可以使用 react context 来做

标签： reactjs react-native react-navigation

【解决方案1】：

您需要使用上下文。只需将导航器包装在上下文提供程序中并向下传递值。您不应该通过渲染道具或参数将道具传递给组件。

【讨论】：

【解决方案2】：

你可以使用 React 中的 useEffect 钩子。但我不确定你是否通过这种方式将它们传递给 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()
},[])

【讨论】：

你在这里打破了异步/等待模式。你不需要 .then ： const response = await fetch(...);常量 json = 等待 response.json(); setResponseJson(json);
此解决方案可行，但恐怕效率低下。该函数将在每次渲染中重新创建和评估。在这里使用上下文可能会更好。
每次渲染都不会评估，因为挂载导航器时挂钩只评估一次。