javascript - 我正确使用 withTracker 吗？我收到与导入/导出有关的错误，但无法找出问题所在

问题描述

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

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

调查页面文件

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 文件上导入。

任何帮助将不胜感激。

标签： javascriptreactjsmeteor

javascript - 我正确使用 withTracker 吗？我收到与导入/导出有关的错误，但无法找出问题所在

问题描述

解决方案

推荐阅读