reactjsでfirebaseデータベースを使用しているときにFirebaseJSSDKが警告する

debugcn 投稿 Dev

アラン・ディシルバ

プロジェクトにfirebaseデータベースを使用しようとしていますが、モジュールを正しくインポートして使用できません。私は公式ドキュメントが推奨するものに従いました。

これは私が使用しているコードです。

import React from "react";
import firebase from "firebase";
import ProjectItemCards from "./components/project-item-cards";

const ProjectContext = React.createContext();

class ProjectProvider extends React.Component {
  constructor() {
    super();
    this.state = {
      social: {},
      projects: [],
      featuredProjects: [],
      loading: true,
    };
  }

  componentDidMount() {
    var ref = firebase.database().ref("projects");

    ref.on("value", (snapshot) => {
      const projects = snapshot.val();

      console.log(projects);

      const featuredProjects = projects
        .map((project) => (project.featured === true ? project : null))
        .slice(0, 4);

      this.setState({
        projects,
        featuredProjects,
        loading: false,
      });
    });
  }

  getProjectElements(projects) {
    const projectElementList = projects.map((project, index) => {
      return (
        <ProjectItemCards key={index} project={project}></ProjectItemCards>
      );
    });
    return projectElementList;
  }

  render() {
    return (
      <ProjectContext.Provider
        value={{ ...this.state, getProjectElements: this.getProjectElements }}
      >
        {this.props.children}
      </ProjectContext.Provider>
    );
  }
}

export { ProjectProvider, ProjectContext };

Firebaseを次のように初期化しました

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

import "bootstrap";
import "./sass/main.scss";

import * as firebase from "firebase/app";
import "firebase/analytics";

var firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "1:841600272388:web:12314d1260dded0601cd51",
  measurementId: "G-55E4QT6C4F",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

ReactDOM.render(<App />, document.getElementById("root"));

上記のコードからすべての機密情報を削除しました。 また、必要に応じてデータを取得しており、すべてが正常に機能していることにも注意してください。この警告を取り除きたいだけです

ロバート・テレル

初期化コードはユーティリティファイルで使用する必要があり、次のようになります。

import * as firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/storage'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
}

firebase.initializeApp(firebaseConfig)


export const db = firebase.firestore()
export const storage = firebase.storage()
export default firebase

利用している個々のFirebase機能をエクスポートする必要があります。あなたの場合、firebase.firestoreを想定します

次に、インポートは次のようになります。