Question

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

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

调查页面文件

    convenience init?(data: Data, maxSize: CGSize) {
    let imageSourceOptions = [kCGImageSourceShouldCache: false] as CFDictionary
    guard let imageSource = CGImageSourceCreateWithData(data as CFData, imageSourceOptions) else {
        return nil
    }

    let options = [
        // The size of the longest edge of the thumbnail
        kCGImageSourceThumbnailMaxPixelSize: max(maxSize.width, maxSize.width),
        kCGImageSourceCreateThumbnailFromImageAlways: true,
        kCGImageSourceShouldCacheImmediately: true,
        kCGImageSourceCreateThumbnailWithTransform: true,
    ] as CFDictionary

    // Generage the thumbnail
    guard let cgImage = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, options) else {
        return nil
    }

    print("Generating Image....")
    self.init(cgImage: cgImage)
}

Routes.jsx文件

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;

错误如下：

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)

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

任何帮助将不胜感激。

Answer 1

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

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

1 个答案: