0

我正在使用“WatermelonDb”和“React-Navigation 5”来从我的所有应用程序屏幕全局访问数据库变量。

据我了解，将初始变量传递到导航中的屏幕，我们使用“initialParams”。

但是，当我这样做时，我得到一个错误：

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Database'
    |     property 'collections' -> object with constructor 'CollectionMap'
    |     property 'map' -> object with constructor 'Object'
    |     property 'alarms' -> object with constructor 'Collection'
    --- property 'database' closes the circle

是否有替代方法可以全局访问数据库变量？

这是我的代码的一部分，我尝试将数据库变量传递给 intialParams

render()
  {
return ( 

  <NavigationContainer>
       <Stack.Navigator 
              initialRouteName="HomeScreen">
        <Stack.Screen
          name="HomeScreen"
          component={HomeScreen}      
         initialParams={{db:database} } // <-
          options={{title: 'Welcome',headerShown: false}}
        />
        <Stack.Screen name="AlarmDetails" options={{title: 'Welcome',headerShown: false}} component={AlarmDetails} />
      </Stack.Navigator>
    </NavigationContainer>

  )
4

3 回答 3

0

似乎将不可序列化的对象传递给initialParams不是一种方法。

有可能以不同的方式实现它。您可以创建一些文件，例如database.js导出数据库对象，然后将其导入屏幕。为了避免重复，例如，您还可以创建一些HOC，withDatabase然后将您的屏幕包装到此组件中。

withDatabase(AlarmDetails)

您也可以将 React Context 用于相同目的。

于 2020-03-01T13:38:53.303 回答
0

你应该看看上下文 https://reactjs.org/docs/context.html

于 2020-03-01T17:36:43.653 回答
0

我能够通过使用 React Context Api 让它工作。您可以在此处查看示例https://www.naroju.com/how-to-use-react-context-to-pass-database-reference-to-child-components/。您可以为您的用例使用确切的代码。

于 2020-05-10T06:33:42.493 回答