ProviderFunction 没有导出我的新函数

Question

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

说明： 如果我单击TestPage.js 按钮，我会得到Uncaught TypeError: fetchTest is not a function。
我在 stackoverflow 上看到了很多关于此类错误的帖子，但没有一个对我有帮助。 -> 我认为原来的问题是index.js 没有被调用。 console.log("firebaseprovider")（在index.js中）没有出现在控制台中，但web-app/src/views/中项目的其他文件与TestPage具有相同的导入和导出。

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

我尝试过的：

• 将console.log 放在TestPage.js 中：它显示用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;

希望这篇文章对大家有帮助，谢谢

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" ... }}