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

Question

我正在制作一个应用程序，用户可以上传文件并存储在 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" alt="photo" />
                <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
};

我做错了什么？

Answer 1

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

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


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

点击此处了解更多信息：

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

Answer 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);