Javascript 在reactjs中使用Firebase数据库时出现Firebase JS SDK警告

我正在尝试将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 };

从“React”导入React；
从“firebase”导入firebase；
从“/components/project item cards”导入ProjectItemCards；
const ProjectContext=React.createContext（）；
类ProjectProvider扩展了React.Component{
构造函数（）{
超级（）；
此.state={
社会：{}，
项目：[]，
特色项目：[]，
加载：对，
};
}
componentDidMount（）{
var ref=firebase.database（）.ref（“项目”）；
参考on（“值”，（快照）=>{
const projects=snapshot.val（）；
console.log（项目）；
const featuredProjects=项目
.map（（project）=>（project.featured==true？project:null））
.切片（0,4）；
这是我的国家({
项目，
特色项目，
加载：false，
});
});
}
getProjectElements（项目）{
const projectElementList=projects.map（（项目，索引）=>{
返回(
);
});
返回项目元素列表；
}
render（）{
返回(
{this.props.children}
);
}
}
导出{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"));

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
导入“引导”；
导入“/sass/main.scss”；
从“firebase/app”导入*作为firebase；
导入“firebase/analytics”；
var firebaseConfig={
apiKey:process.env.REACT\u APP\u API\u KEY，
authDomain:“”，
数据库URL:“”，
投射：“，
storageBucket:“”，
messagingSenderId:“”，
appId:“1:841600272388:web:12314d1260dded0601cd51”，
测量：“G-55E4QT6C4F”，
};
//初始化Firebase
firebase.initializeApp（firebaseConfig）；
firebase.analytics（）；
ReactDOM.render（
初始化代码应在实用程序文件中使用，如下所示：

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

那么您的导入应该如下所示：

import {db} from '../utils/firebase'

我相信这会扼杀警告！我建议，因为这已经出现过几次了。