Question

我有一个react-native应用程序，它使用react-redux-firebase，react-native-firebase连接到Firestore以返回一些待办事项记录。存储中有记录，但是显示的只是“正在加载”文本。它永远不会更新待办事项。

我尝试直接在应用程序内进行连接，并且工作正常，因此我假设Firebase配置正确。

  this.ref.get().then((querySnapshot) =>  {
            console.log("ListItemFS: started query snapshot", querySnapshot);
            this.handleSnapshot(querySnapshot);
        });

这是我的App.tsx

import React from 'react'
import { Provider } from 'react-redux'
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import firebase from 'react-native-firebase'
import { createStore, compose } from 'redux'
import { composeWithDevTools } from "redux-devtools-extension";
import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' 
import { combineReducers } from 'redux';
import { firebaseStateReducer  } from 'react-redux-firebase'
import Todos from './Todos';


//Configure firebase
const fbConfig = {
  userProfile: 'users',
 useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB,
 enableLogging: true
}
//firebase.initializeApp(fbConfig) // <- I have tried with and without this with no difference.
//let db = firebase.firestore(); makes no difference

//Configure reducers
const rootReducer = combineReducers({
  firebase:firebaseStateReducer, 
  firestore: firestoreReducer
})

// Configure store
const store = createStore(rootReducer, compose(composeWithDevTools())) 


export default () => (
  <Provider store={store}>
    <ReactReduxFirebaseProvider
      firebase={firebase}
      config={fbConfig}
      dispatch={store.dispatch}
      createFirestoreInstance={createFirestoreInstance}
      >
      <Todos />
    </ReactReduxFirebaseProvider>
  </Provider>
)

这是我的TODO组件

import React from 'react'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { isLoaded, isEmpty } from 'react-redux-firebase/lib/helpers'
import { View ,Text} from 'react-native'
import { firestoreConnect } from 'react-redux-firebase'

function Todos({ todos, firebase, state }) {
  console.log("ToDos",todos);
  console.log("state",state);

  if (!isLoaded(todos)) {
    return <Text>Loading...</Text>
  }
  if (isEmpty(todos)) {
    return <Text>Todos List Is Empty</Text>
  }
  return (
    <View>
        {
          Object.keys(todos).map(
            (key, id) => (
              <Text >First Key:{todos[key]}</Text>
            )
          )
        }
    </View>
  )
}

export default compose(
  firestoreConnect(() => [
    { collection: 'todos' } //'todos' // { path: '/todos' } // neither works
  ]),
  connect(state => ({
    todos: state.firestore.data.todos
    // profile: state.firebase.profile // load profile
  }))
)(Todos)

以下是我的依赖项

 "dependencies": {
    "expo": "^34.0.1",
    "fbjs": "^1.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "0.59.10",
    "react-native-firebase": "5.2.0",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-router-flux": "^4.1.0-beta.8",
    "react-native-screens": "1.0.0-alpha.22",
    "react-native-size-matters": "^0.2.1",
    "react-native-unimodules": "~0.5.2",
    "react-native-web": "^0.11.4",
    "react-navigation-deprecated-tab-navigator": "^1.3.0",
    "react-redux": "^5.0.6",
    "react-redux-firebase": "^3.0.0-beta.2",
    "recompose": "^0.30.0",
    "redux": "3.x.x",
    "redux-devtools-extension": "^2.13.8",
    "redux-firestore": "^0.8.0"
  }

如果您对我做错了什么有任何建议，我将不胜感激。

Answer 1

尝试添加

import 'react-native-firebase/firestore'

在您的App.tsx

中

react-redux-firebase Firestore从未加载数据

1 个答案: