Reactjs 如何修复React/Redux/Firebase将文件上载到存储器的错误

我正在设置一个文件上传程序，将图像上传到我的firebase存储。我正在使用React-Redux Firebase来完成所有这一切。根据，我应该能够使用firebaseConnect或getFirebase（）使用来自props.firebase的uploadFile或uploadFile函数。尝试此操作时，出现错误：未捕获错误：上传文件需要Firebase存储。

export const addImage = (image, callback = () => {}) => {
    return (dispatch, getState, { getFirebase, getFirestore }) => {
        const firebase = getFirebase();
        const imagesPath = "images";

        firebase.uploadFile(imagesPath, image).then(uploadTaskSnapshot => {
            console.log("uploadTaskSnapshot", uploadTaskSnapshot);
        });

        dispatch({ type: "ADDED_IMAGE", image });
    };
};

该函数在我尝试console.log时存在。但我的存储几乎没有设置。我已经检查了我的firebase控制台，它肯定存在。我还检查了api密钥设置，并且存储桶变量是正确的

下面是我在index.js文件和firebaseConfig文件中使用的设置代码

Index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { reduxFirestore, getFirestore } from "redux-firestore";
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import fbConfig from "./config/fbConfig";

require("dotenv").config();

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, { useFirestoreForProfile: true, userProfile: "users", attachAuthIsReady: true })
    )
);

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById("root")
    );
});

---

我找到了答案。我需要一个额外的导入来导入index.js文件中的“firebase/storage”

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { reduxFirestore, getFirestore } from "redux-firestore";
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import fbConfig from "./config/fbConfig";
import "firebase/storage";

require("dotenv").config();

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, { useFirestoreForProfile: true, userProfile: "users", attachAuthIsReady: true })
    )
);

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById("root")
    );
});

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“redux”导入{createStore，applyMiddleware，compose}；
从“/store/reducers/rootReducer”导入rootReducer；
从“react redux”导入{Provider}；
从“redux thunk”导入thunk；
从“redux firestore”导入{redux firestore，getFirestore}；
从“react-redux firebase”导入{ReactRedux firebase，getFirebase}；
从“/config/fbConfig”导入fbConfig；
导入“firebase/storage”；
require（“dotenv”）.config（）；
const store=createStore(
减根剂，
谱写(
applyMiddleware（thunk.withExtraArgument（{getFirebase，getFirestore}）），
reduxFirestore（fbConfig），
reactReduxFirebase（fbConfig，{useFirestoreForProfile:true，userProfile:“users”，attachAuthIsReady:true}）
)
);
store.firebaseAuthIsReady.then（（）=>{
ReactDOM.render(
,
document.getElementById（“根”）
);
});

您是否尝试在config.js中导入“firebase/storage”？

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { reduxFirestore, getFirestore } from "redux-firestore";
import { reactReduxFirebase, getFirebase } from "react-redux-firebase";
import fbConfig from "./config/fbConfig";
import "firebase/storage";

require("dotenv").config();

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, { useFirestoreForProfile: true, userProfile: "users", attachAuthIsReady: true })
    )
);

store.firebaseAuthIsReady.then(() => {
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById("root")
    );
});