ProviderFunction 不导出我的新函数

Question

我的问题： 我希望我的 FirebaseProvider 函数通过应用程序提供一个包含所有函数的对象。问题是所有功能都通过我的文件很好地提供了，除了我的最后一个新功能：fetchTest.

解释： 如果我点击 TestPage.js 按钮，我会得到 Uncaught TypeError: fetchTest is not a function.
我在 Whosebug 上看到很多关于此类错误的 post，但是 none 确实帮助了我。 -> 我认为原来的问题是 index.js 没有被调用。 console.log("firebaseprovider")（在index.js中）没有出现在控制台中，但web-app/src/views/中项目的其他文件与TestPage.[=50=中的导入和导出相同]

由于 App.js 代码在所有其他文件上运行良好，我不知道为什么 console.log("firebaseprovider") 从未显示在导航器控制台中。（编辑：无论我去哪一页，这个console.log都不会出现）
<FirebaseProvider>好像没有提供TestPage.js。你有什么想法吗？

我尝试过的：

在 TestPage.js 中放置一个 console.log ：它显示了用 index.js 而不是 fetchTest 编写的每个函数。它似乎无法通过 api 对象正确导出。
在 TestPage.js 中尝试 console.log("api.fetchTest")：控制台显示 undefined。
在 index.js 中添加第二个没有参数的测试函数，它只执行 console.log("test")
将 imports/exports 和 api 声明与 web-app/src/views/
在 TestPage.js 中创建一个 handleSubmit() 函数，而不是将函数直接放在 return
删除node_modules然后yarn install
yarn workspace web-app build 然后重新启动 yarn workspace web-app start

（这是一个包含 common/ 和 web-app/ 文件夹的 Yarn Workspaces 项目）

common/src/index.js:

import React, { createContext } from 'react';
import {FirebaseConfig} from 'config';

const FirebaseContext = createContext(null);
const FirebaseProvider  = ({ children }) => {
    console.log("firebaseprovider");  // is not displayed in the console
    let firebase = { app: null, database: null, auth: null, storage:null }

    if (!app.apps.length) {  // I tried to comment out this line (and the '}') -> no difference
        app.initializeApp(FirebaseConfig);  // no difference when commented out
        firebase = {
            app: app,
            database: app.database(),
            auth: app.auth(),
            storage: app.storage(),
            // [ ... ] other lines of similar code
            api : {  // here are functions to import
              fetchUser: () => (dispatch) => fetchUser()(dispatch)(firebase),
              addProfile: (details) => (dispatch) => addProfile(userDetails)(dispatch)(firebase),
              // [ ... ] other functions, properly exported and working in other files
              // My function :
              fetchTest: (testData) => (dispatch) => fetchTest(testData)(dispatch)(firebase),
            }
        }
    }
    return (
        <FirebaseContext.Provider value={firebase}>
            {children}
        </FirebaseContext.Provider>
    )
}
export { FirebaseContext, FirebaseProvider, store }

web-app/src/views/TestPage.js:

import React, { useContext } from "react";
import { useDispatch } from "react-redux";
import { FirebaseContext } from "common";

const TestPage.js = () => {
  const { api } = useContext(FirebaseContext);
  console.log(api);  // Displays all functions in api object, but not fetchTest
  const { fetchTest } = api;
  const dispatch = useDispatch();
  const testData = { validation: "pending" };
  return <button onClick={ () => {
    dispatch(fetchTest(testData));  // Tried with/without dispatch
    alert("done");
  }}>Test button</button>
}
export default TestPage;

web-app/src/App.js:

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
// ... import all pages
import { Provider } from 'react-redux';
import TestPage from './views/CreateSiteNeed';  // written same way  for the other pages
import { store, FirebaseProvider } from 'common';
function App() {
  return (
    <Provider store={store}>
      <FirebaseProvider>
        <AuthLoading>
          <Router history={hist}>
            <Switch>
              <ProtectedRoute exact component={MyProfile} path="/profile" />
              <!-- [ ... ] more <ProtectedRoute /> lines, form imported Pages line 3. -->
              <ProtectedRoute exact component={TestPage} path="/testpage" />
            </Switch>
          </Router>
        </AuthLoading>
      </FirebaseProvider>
    </Provider>
  );
}
export default App;

我希望一些人会发现这个post有用，谢谢

Answer 1

问题出在这里：

首先：
我正在使用 Redux，所以 fetchTest() 有它的 testActions.js 和 testReducer.js 文件，它们是功能性的。但我确实忘记更新我的 store.js :

// [ ... ] import all reducers
import { testReducer as testData } from '../reducers/testReducer'; // was'nt imported

const reducers = combineReducers({
  auth,
  usersdata,
  // [ ... ] other imported reducers
  testData  // My test reducer
}
// The rest is a classic store.js code

其次：
当我使用 Yarn Workspaces 时，我必须编译 common/dist/index.js 中的代码以使其可以通过整个代码访问（即使是本地测试）。
这是编译代码的命令（-> 包括上面所做的所有 redux 编辑）并使其可访问 web-app 工作区：

yarn workspace common build && yarn workspace web-app add common@1.0.0 --force

命令第二部分的解释(yarn workspace web-app add common@1.0.0 --force):
web-app/package.json 文件包含 { "dependencies": { ... "common":"1.0.0" ... }}

ProviderFunction 不导出我的新函数

ProviderFunction not exporting my new functions

firebase

reactjs

yarn-workspaces