为啥它返回null？

Posted 2023-02-22

【中文标题】为啥它返回null？

【英文标题】：why it is returning null?为什么它返回null？

【发布时间】：2021-02-03 16:29:46

【问题描述】：

您好，我正在尝试学习 firebase。现在我正在尝试关注 github doc 中的内容。 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 用于显示待办事项。 &最后一个是前两个的组合

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

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


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

在 Todo 按钮组件中，我想在单击按钮时添加一个新的 todo

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

【参考方案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

【讨论】：

感谢您的回答。在执行您所显示的操作后，我收到了 Permission denied 错误。当我尝试添加新的待办事项时。这与firebase服务器有关吗？

我猜你需要设置数据库权限。你可以在console.firebase.google.com