为什么它返回null？

Question

嗨，我正在尝试学习Firebase。现在，我尝试遵循github文档中的内容。 Like to gitHub

这是我的index.js文件

const rfConfig = {}; // optional redux-firestore Config Options

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: 'something',
  authDomain: 'something',
  databaseURL: 'something',
  projectId: 'something',
  storageBucket: 'something.com',
  messagingSenderId: 'something',
  appId: '1:something',
  measurementId: 'G-something',
};

firebase.initializeApp(firebaseConfig);

// Initialize Cloud Firestore through Firebase
firebase.firestore();

// Add reduxFirestore store enhancer to store creator
const createStoreWithFirebase = compose(
  reduxFirestore(firebase, rfConfig), // firebase instance as first argument, rfConfig as optional second
)(createStore);

// Add Firebase to reducers
const rootReducer = combineReducers({
  firestore: firestoreReducer,
});

// Create store with reducers and initial state
const initialState = {};
const store = createStoreWithFirebase(rootReducer, initialState);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

我的文件夹包含3个组件。 1是添加待办事项。 1用于显示待办事项。 ＆最后一个1是前两个的组合

这是我的应用程序组件和TodoShow组件

const App = () => {
  return (
    <div>
      <TodoShow/>
    </div>
  )
}

const TodoShow = () => {
    return (
        <div>
            <Todo/>
            {/* <Todos/> */}
        </div>
    )
}

在“待办事项”按钮组件内部，我想在单击按钮时添加新的待办事项

import { useFirebase } from 'react-redux-firebase'

export default function Todo() {
  const firebase = useFirebase()

  function addSampleTodo() {
    const sampleTodo = { text: 'Sample', done: false }
    return firebase.push('todos', sampleTodo)
  }

  return (
    <div>
      <h1>New Sample Todo</h1>
      <button onClick={addSampleTodo}>Add</button>
    </div>
  )
}

但是当我单击按钮时，该应用程序不知道Firebase。

这是照片

我这里缺少什么吗？我已经安装了Firebase，react-redux-firebase，redux-firestore

Answer 1

您需要在组件树顶部附近绘制ReactReduxFirebaseProvider。这就是useFirebase试图访问的内容，因此如果没有访问权限，您将无法定义。

const rrfConfig = {
  userProfile: 'users'
  // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch
  // createFirestoreInstance // <- needed if using firestore
}

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <App />
      </ReactReduxFirebaseProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

有关更多信息，请参见文档的这一部分：https://github.com/prescottprue/react-redux-firebase#use