javascript - 我想连接 react 和 firebase

Question

我对 Firebase 和 React 有疑问。这个问题是在单击我的添加数据按钮将数据添加到数据库之后出现的。我得到这个 console.log

Reference_impl.ts:482 Uncaught TypeError: db._checkNotDeleted is not a functionat ref (Reference_impl.ts:482:1)at insertData (Modal.js:44:1)at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)at invokeGuardedCallback (react-dom.development.js:4277:1)at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)at executeDispatch (react-dom.development.js:9041:1)at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)at processDispatchQueue (react-dom.development.js:9086:1)at dispatchEventsForPlugins (react-dom.development.js:9097:1)

你能看到我的错误吗？我想制作简单的 CRUD 应用。

这是我的代码。

const ModalOverlay = (props) => {
    const sifraRef = useRef();
    const nazivRef = useRef();
    const detaljiRef = useRef();
    const opisRef = useRef();
    const brojObrokaRef = useRef();
    const napomenaRef = useRef();

    const addNewData = (e) => {
      e.preventDefault();

      let data = {
        sifra: sifraRef.current.value,
        naziv: nazivRef.current.value,
        detalji_dijete: detaljiRef.current.value,
        opis: opisRef.current.value,
        broj_obroka: brojObrokaRef.current.value,
        napomena: napomenaRef.current.value
      };
      const uuid = uid();
      set(ref(firestore, `/${uuid}`), {
        data,
        uuid
      })
      close();
    }

youtube视频我几乎都看了，还是解决不了这个问题。

Answer 1

您正在使用用于 Firebase Realtime Database 的 'firebase/database' SDK .对于 Firestore ，你应该使用 'firebase/firestore' 这样应该是:

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {...} // Firebase web config

const app = initializeApp(firebaseConfig)

export const db = getFirestore(app);

然后在需要的地方导入db:

import { db } from "../../../firebase"
import { addDoc, collection } from 'firebase/firestore' // <-- not firebase/database

const addNewData = async (e) => {
  e.preventDefault();
  const data = {...};
                
  await addDoc(collection(db, 'messages'), data)
}

这应该在消息集合中添加一个新文档。查看documentation还有这个video在 Firebase channel 上获取更多信息。