我是否正确使用withTracker？ 我收到与进口/出口有关的错误，但无法找出问题

Question

因此，我将一个旧项目升级到react的更新版本，并决定用withTracker方法替换流星反应数据的createContainer。 我相信语法正确无误，但出现错误，似乎与我无法正确导入或导出有关。

我尝试了多种不同的导出和导入组合，但是似乎没有任何效果，因此我不确定是否只是在犯一个愚蠢的错误。

SurveysPage文件

import React from "react";
import { Meteor } from "meteor/meteor";
import { withTracker } from "meteor/react-meteor-data";
import { Helmet } from "react-helmet";
import orderBy from "lodash/orderBy";
import includes from "lodash/includes";
import capitalize from "lodash/capitalize";
import Folders from "/imports/api/folders/folders";
import Survey, { SurveysWithFirstResponse } from "/imports/api/surveys/surveys";
import SurveysList from "./surveys-list";
import Header from "/imports/ui/layouts/header";
import Main from "/imports/ui/layouts/main";
import Loader from "/imports/ui/loader";

export class SurveysPage extends React.Component {
    -- SurveysPage code
    }
}

const SurveysPageContainer = withTracker((props) => {
    const subs = [
        Meteor.subscribe("folders"),
        Meteor.subscribe("all-surveys"),
        Meteor.subscribe("surveys-with-first-response")
    ];

    const loading = subs.some((sub) => !sub.ready());
    const folders = Folders.find().fetch();
    const surveys = Survey.find({}, { sort: { createdAt: -1 } }).fetch();
    const surveysWithFirstResponse = SurveysWithFirstResponse.find().fetch();

    let detailedFolders = [];
    // TODO (mix) refactor the surveys-with-first-response publication to do this join
    if (!loading) {
        detailedFolders = folders.map((folder) => {
            const surveysInFolder = surveys.filter((s) =>
                includes(folder.surveys, s.origin.id)
            );
            const decoratedSurveys = surveysInFolder.map((s) => {
                const surveyObj = surveysWithFirstResponse.find(
                    (surveyObj) => surveyObj.originId === s.origin.id
                );
                if (surveyObj && surveyObj.responseId)
                    s.responseId = surveyObj.responseId;
                return s;
            });

            const contents = orderBy(decoratedSurveys, "title");

            return Object.assign({}, folder, { contents });
        });
    }

    return { loading, folders: detailedFolders, surveys };
})(SurveysPage);

export default SurveysPageContainer;

Routes.jsx文件

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import BasicLayout from "./layouts/basic-layout";
import SurveysPageContainer from "/imports/ui/surveys/surveys-page";
import ResponsesPage from "/imports/ui/responses/responses-page";
import ResponsePage from "/imports/ui/response/response-page";
import AssignmentPage from "/imports/ui/assignment/assignment-page";
import { createBrowserHistory } from "history";

const browserHistory = createBrowserHistory();

const Routes = () => {
    return (
        <Router history={browserHistory}>
            <Route path="/" component={BasicLayout} />
            <Switch>
                <Route exact path="/" component={SurveysPageContainer} />
                <Route path="survey/:surveyId" component={ResponsesPage} />
                <Route path="survey/:surveyId/assignment" component={AssignmentPage} />
                <Route
                    path="/survey/:surveyId/response/:responseId"
                    component={ResponsePage}
                />
            </Switch>
        </Router>
    );
};

export default Routes;

错误如下：

backend.js:6 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    in Unknown (created by SurveysPage)
    in div (created by SurveysPage)
    in SurveysPage (created by ReactMeteorDataComponent)
    in ReactMeteorDataComponent (created by Context.Consumer)
    in Route (created by Routes)
    in Switch (created by Routes)
    in Router (created by Routes)
    in Routes
    in div

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:28717:34
    at createFiberFromTypeAndProps (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:28720:13)
    at createFiberFromElement (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:28741:15)
    at createChild (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:18691:28)
    at reconcileChildrenArray (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:18942:25)
    at reconcileChildFibers (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:19279:14)
    at reconcileChildren (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:21372:28)
    at updateHostComponent (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:21851:3)
    at beginWork$1 (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:23191:14)
    at HTMLUnknownElement.callCallback (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:5028:14)

backend.js:6 The above error occurred in the <div> component:
    in div
    in Unknown (created by SurveysPage)
    in div (created by SurveysPage)
    in SurveysPage (created by ReactMeteorDataComponent)
    in ReactMeteorDataComponent (created by Context.Consumer)
    in Route (created by Routes)
    in Switch (created by Routes)
    in Router (created by Routes)
    in Routes
    in div

我怀疑问题是由于SurveysPage文件上的withTracker导出或Routes文件上的导入引起的。

任何帮助将不胜感激。

Answer 1

修复：问题来自于从React-Router导入，而不是Header组件中的react-router-dom。