TypeError：无法读取未定义 Firebase 存储反应的属性“参考”

Posted 2023-03-22

【中文标题】TypeError：无法读取未定义 Firebase 存储反应的属性“参考”

【英文标题】：TypeError: Cannot read property 'ref' of undefined Firebase-storage react

【发布时间】：2020-04-14 04:13:20

【问题描述】：

我正在制作一个应用程序，用户可以上传文件并存储在 Firebase 存储中。 当我单击上传时，不断收到错误“TypeError：无法读取未定义的属性 'ref'”firebase 配置看起来正确。 任何帮助，非常感谢提示！

这是我的代码

import React from "react";
import firebase from "./services/firebase";
import storage from "./services/firebase";

export class Upload extends React.Component 
  constructor(props) 
    super(props);
    this.state =  image: null, url: "" ;
    this.handleUpload = this.handleUpload.bind(this);
    this.handleChange = this.handleChange.bind(this);
  

  handleChange(event) 
    console.log(event.target.files[0]);
    if (event.target.files[0]) 
      const image = event.target.files[0];
      this.setState( image: image );
    
  

  handleUpload() 
    const image = this.state.image;
    console.log(image);
    const uploadTask = firebase.storage.ref(`images/$image.name`).put(image);
    uploadTask.on("state_changed", () => 
      firebase.storage
        .ref("images")
        .child(image.name)
        .getDownloadURL()
        .then(url => 
          this.setState( url );
        );
    );
  

  render() 
    console.log(this.state.image);
    return (
      <div className="upload">
        <h2 className="title">Upload content for your project</h2>
        <div className="container">
         <label>Photo</label>
                <img src="/imgs/P.png"  />
                <input
                  type="file"
                  accept=".jpg, image/png, .jpeg, .gif"
                  onChange=this.handleChange
                />
                <button onClick=this.handleUpload>Upload</button>
        </div>
     </div>
    );
  

这里是“./services/firebase”文件

import firebase from "firebase/app";
import "firebase/database";
import "firebase/auth";
import "firebase/storage";
import "firebase/firestore";
import config from "./config";


const firebaseConfig = config;


firebase.initializeApp(firebaseConfig);


const database = firebase.database();


const listenTo = (dataToListenTo = "", callbackFunction = () => ) => 
  const databaseRef = database.ref(dataToListenTo);

  databaseRef.on("value", snapshot => 
    callbackFunction(snapshot);
  );

  return databaseRef;
;


const writeTo = (dataToWriteTo = "", value) => 
  const databaseRef = database.ref(dataToWriteTo);

  databaseRef.push(value);
;


const update = (keyToUpdate = "", value) => 
  const databaseRef = database.ref(keyToUpdate);

  databaseRef.update(value);
;


const remove = (keyToUpdate = "") => 
  const databaseRef = database.ref(keyToUpdate);

  databaseRef.remove();
;


const getCurrentUser = () => 
  return firebase.auth().currentUser;
;


const isLoggedIn = () => 
  if (firebase.auth().currentUser) 
    return true;
  

  return false;
;

const signIn = (email, password) => 
  return firebase.auth().signInWithEmailAndPassword(email, password);
;


const onLoginChange = (callbackFunction = () => ) => 
  const authRef = firebase.auth().onAuthStateChanged(user => 
    callbackFunction(user);
  );

  return authRef;
;


const signOut = () => 
  return firebase.auth().signOut();
;

const createUser = (email, password) => 
  return firebase.auth().createUserWithEmailAndPassword(email, password);
;

export default 
  writeTo,
  listenTo,
  update,
  remove,
  getCurrentUser,
  isLoggedIn,
  signIn,
  onLoginChange,
  signOut,
  createUser
;

我做错了什么？

【问题讨论】：

我没有看到你初始化了 firebase。

ref 不是documentation 中描述的属性吗？ firebase.storage.ref.child("images/" + image.name) 应该可以解决问题

@HAßdøµ 嗨，我在不同的组件中做了并导入了

@ruX ref 和 storage 都不是属性firebase.google.com/docs/storage/web/upload-files#upload_files

@Yukichka 尝试导入第一个进行初始化的组件，然后导入其他组件。

【参考方案1】：

storage() 是一种方法而不是属性，因此在您的代码中您应该使用以下内容：

firebase.storage().ref(`images/$images.name`)


firebase.storage().ref("images")

点击此处了解更多信息：

https://firebase.google.com/docs/reference/js/firebase.storage.html

【参考方案2】：

希望这可以分享另一个观点，也许操作顺序会有所帮助，正如您在我的帐户中看到的那样，仍在学习自己。

我通过移动“const userUid = firebase.auth.currentUser!.uid”解决了这个问题 深入到它正在使用的函数中，如下所示：

const userUid = auth.currentUser.uid;

const handleSubmit = (e: any) => 
    e.preventDefault();
    setLoader(true);
    dbuser
      .collection("User Data")
      .doc(userUid)
      .set(
        name: name,
        email: email,
        message: message,
      )
      .then(() => 
        alert(
          "Congratulations"
        );
        setLoader(false);
      )
      .catch();
    // alert(error.message);
    setLoader(false);

to

  const handleSubmit = (e: any) => 
    const userUid = auth.currentUser!.uid;
    e.preventDefault();
    setLoader(true);
    dbuser
      .collection("User Data")
      .doc(userUid)
      .set(
        name: name,
        email: email,
        message: message,
      )
      .then(() => 
        alert(
          "Congratulations, it will take 1 business day to review and approve your seller profile"
        );
        setLoader(false);
      )
      .catch();

    // alert(error.message);
    setLoader(false);