storageRef.child 不是 firebase 中的函数答案

【问题标题】：storageRef.child is not a function in firebasestorageRef.child 不是 firebase 中的函数
【发布时间】：2019-06-11 11:17:11
【问题描述】：

使用 react-firebase-file-uploader 软件包将文件上传到 Firebase 时遇到问题。

收到的错误是Uncaught (in promise) TypeError: storageRef.child is not a function

首先，firebase 被导入到我的 GatsbyJS Layout.js in componentDidMount as

Layout.js

componentDidMount() {
  const app = import('firebase/app');
  const auth = import('firebase/auth');
  const database = import('firebase/firestore');
  const storage = import('firebase/storage');

  Promise.all([app, auth, database, storage]).then(values => {
    const firebase = getFirebase(values[0]);
    !this.isCancelled && this.setState({ firebase });
  });
}

然后，将firebase 添加为props，使用React.createContext 将functions 传递给组件

FirebaseContext.js

const FirebaseContext = React.createContext(null);
export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

export default FirebaseContext;

在firebase组件内部，我们使用onboardStorage作为包含this.storage的函数

Firebase.js

class Firebase {
  constructor(app) {
    app.initializeApp(config);

    /* Firebase APIs */
    this.app = app;
    this.storage = app.storage();

  // *** Storage API ***
  onboardStorage = () => this.storage;
}

let firebase;

function getFirebase(app, auth, database, storage) {
  if (!firebase) {
    firebase = new Firebase(app, auth, database, storage);
  }

  return firebase;
}

export default getFirebase;

然后将其传递给我的表单组件中的FileUploader 组件

Form.js

<FileUploader
  accept="image/*"
  name="avatar"
  filename="operator_accreditation"
  storageRef={() => firebase.onboardStorage().ref(`${uid}/files`)}
  onUploadStart={this.handleUploadStart}
  onUploadError={this.handleUploadError}
  onUploadSuccess={this.handleUploadSuccess}
  onProgress={this.handleProgress}
/>

Form.js中的各个句柄函数如下

    handleUploadStart = () =>
    this.setState({
      operatorAccreditationIsUploading: true,
      operatorAccreditationProgress: 0
    });

  handleProgress = operatorAccreditationProgress =>
    this.setState({ operatorAccreditationProgress });

  handleUploadError = error => {
    this.setState({ operatorAccreditationIsUploading: false });
    console.error(error);
  };

  handleUploadSuccess = filename => {
    const { firebase, uid } = this.props;
    this.setState({
      operatorAccreditation: filename,
      operatorAccreditationProgress: 100,
      operatorAccreditationIsUploading: false
    });
    const storageOperatorAccreditation = firebase.onboardStorage();
    storageOperatorAccreditation
      .ref(`${uid}/files`)
      .child(filename)
      .getDownloadURL()
      .then(url => this.setState({ operatorAccreditation: url }));
  };

const uid 是auth.uid

添加console 消息表示在上传文件时不会触发任何消息。

选择文件后出现错误，说明问题出在FileUploader的storageRef。我做错了什么才能得到Uncaught (in promise) TypeError: storageRef.child is not a function？

【问题讨论】：

标签： javascript reactjs firebase firebase-storage gatsby

【解决方案1】：

我刚刚遇到了类似的问题。问题是您将函数作为 storageRef 属性传递给 FileUploader。相反，您应该像这样直接传递一个 storageRef 对象：

<FileUploader
  accept="image/*"
  name="avatar"
  filename="operator_accreditation"
  storageRef={firebase.onboardStorage().ref(`${uid}/files`)}
  onUploadStart={this.handleUploadStart}
  onUploadError={this.handleUploadError}
  onUploadSuccess={this.handleUploadSuccess}
  onProgress={this.handleProgress}
/>

【讨论】：