Question

我升级了流星，我开始收到createContainer（）的弃用警告。因此，我尝试实施withTracker，但现在我得到了Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.。我不确定我在这里失踪了什么，有人可以指出我的错误。

路径：App.jsx

import { Meteor } from 'meteor/meteor';
import React from 'react';
import PropTypes from 'prop-types';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { withTracker } from 'meteor/react-meteor-data';

// IsCandidate Spefic Routes
import TestContainer from '../../containers/candidate/TestContainer';

const App = appProps => (
  <Router>
    <ScrollToTop>
      <div className="bgColor">
        <NavBar {...appProps} />
        <Grid className="main-page-container">
          <Switch>
            {/* candidate routes */}
            <IsCandidate exact path="/candidate/testpage/:id" component={withTracker(TestContainer)} {...appProps} />

            {/* IsPublic routes */}
            <Route render={function () {
              return <p>Page not found</p>;
            }}
            />
          </Switch>
        </Grid>
      </div>
    </ScrollToTop>
  </Router>
);

App.propTypes = {
  loggingIn: PropTypes.bool,
  isCandidate: PropTypes.bool
};

export default createContainer(() => {
  const loggingIn = Meteor.loggingIn();
  return {
    loggingIn,
    isCandidate: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isCandidate'),
  };
}, App);

路径：IsCandidate.jsx

import React from 'react';
import PropTypes from 'prop-types'; // ES6
import { Route, Redirect } from 'react-router-dom';

const IsCandidate = ({ loggingIn, isCandidate, component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (loggingIn) return <div />;
      return isCandidate ?
      (<Component loggingIn={loggingIn} isCandidate={isCandidate} {...rest} {...props} />) :
      (<Redirect to="/login" />);
    }}
  />
);

IsCandidate.propTypes = {
  loggingIn: PropTypes.bool,
  isCandidate: PropTypes.bool,
  component: PropTypes.func
};

export default IsCandidate;

路径：Testcontainer.jsx

import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { Test } from '../../../api/test/test';

import TestPage from '../../pages/candidate/TestPage';

export default TestContainer = withTracker(({ match }) => {

  const testHandle = Meteor.subscribe('test', match.params.id);
  const loadingTest = !testHandle.ready();
  const testCollection = Test.findOne(match.params.id);
  const testExist = !loadingTest && !!testCollection;


return {
  loadingTest,
  testExist,
  testCollection: testExist ? testCollection : {}
};

}, TestPage);

更新

export default withTracker(() => {
  const loggingIn = Meteor.loggingIn();
  return {
    loggingIn,
    isCandidate: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isCandidate'),
    isEmployer: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isEmployer'),
    isAdmin: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'isAdmin')
  };
})(App);

Answer 1

在App.jsx导入withTracker但使用createContainer。

withTracker只接受一个参数（你的被动函数）并将你的子组件包装在createContainer带有2个参数（函数和组件）的地方。

createContainer(fn, C);

withTracker(fn)(C);

修改从此行删除App.js中的withTracker调用：

<IsCandidate exact path="/candidate/testpage/:id" component={withTracker(TestContainer)} {...appProps} />

所以它变成了

<IsCandidate exact path="/candidate/testpage/:id" component={TestContainer} {...appProps} />

怎么样？

使用React Router V4从createContainer升级到withTracker

1 个答案: