createContainer() 无法通过 ID 检索对象

Question

我目前正在使用 Meteor 和 React 构建一个 noughts 和 crosses 游戏。当我第一次启动应用程序时，我在 'Games' 集合中创建了一个新项目，并将该对象的 ID 作为道具发送到应用程序：

Meteor.startup(() => {
    Meteor.call('games.create', function(error, result) {
        var id = result;
        render(<App gameId={id} />, document.getElementById('render-target'));
    });
});

然后我在 App 组件上使用 createContainer 来检索数据库中的游戏，这样我就可以在 App 中操作它：

export default createContainer(({gameId}) => {
  Meteor.subscribe('games');
  console.log(gameId);
  return {
    gameState: Games.find(ObjectId(gameId)).fetch(),
  };
}, App);

添加此 createContainer 代码后，应用程序停止呈现。在控制台中，我收到一条很长的错误消息，复制如下。提前致谢！

Exception in delivering result of invoking 'games.create': require<.imports.ui["App.jsx"]</exports.default<@http://localhost:3000/app/app.js?hash=d138fc2a4d2ee444a0b4b78d568bc9e3acf71f7c:758:5
getMeteorData@http://localhost:3000/packages/react-meteor-data.js?hash=913595fb1851d69206a4cd0ce5bfbacdc56a8830:282:16
calculateData/this.computation</<@http://localhost:3000/packages/react-meteor-data.js?hash=913595fb1851d69206a4cd0ce5bfbacdc56a8830:164:22
Tracker.Computation.prototype._compute@http://localhost:3000/packages/tracker.js?hash=9f8a0cec09c662aad5a5e224447b2d4e88d011ef:339:5
Tracker.Computation@http://localhost:3000/packages/tracker.js?hash=9f8a0cec09c662aad5a5e224447b2d4e88d011ef:229:5
Tracker.autorun@http://localhost:3000/packages/tracker.js?hash=9f8a0cec09c662aad5a5e224447b2d4e88d011ef:604:11
calculateData/this.computation<@http://localhost:3000/packages/react-meteor-data.js?hash=913595fb1851d69206a4cd0ce5bfbacdc56a8830:156:16
Tracker.nonreactive@http://localhost:3000/packages/tracker.js?hash=9f8a0cec09c662aad5a5e224447b2d4e88d011ef:631:12
calculateData@http://localhost:3000/packages/react-meteor-data.js?hash=913595fb1851d69206a4cd0ce5bfbacdc56a8830:155:26
componentWillMount@http://localhost:3000/packages/react-meteor-data.js?hash=913595fb1851d69206a4cd0ce5bfbacdc56a8830:66:21
require<.node_modules["react-dom"].lib["ReactCompositeComponent.js"]</ReactCompositeComponent.performInitialMount/<@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:18931:18
measureLifeCyclePerf@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:18658:12
require<.node_modules["react-dom"].lib["ReactCompositeComponent.js"]</ReactCompositeComponent.performInitialMount@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:18930:9
require<.node_modules["react-dom"].lib["ReactCompositeComponent.js"]</ReactCompositeComponent.mountComponent@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:18841:16
require<.node_modules["react-dom"].lib["ReactReconciler.js"]</ReactReconciler.mountComponent@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:11766:18
require<.node_modules["react-dom"].lib["ReactCompositeComponent.js"]</ReactCompositeComponent.performInitialMount@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:18954:18
require<.node_modules["react-dom"].lib["ReactCompositeComponent.js"]</ReactCompositeComponent.mountComponent@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:18841:16
require<.node_modules["react-dom"].lib["ReactReconciler.js"]</ReactReconciler.mountComponent@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:11766:18
mountComponentIntoNode@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:23920:16
require<.node_modules["react-dom"].lib["Transaction.js"]</TransactionImpl.perform@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:12730:13
batchedMountComponentIntoNode@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:23942:3
require<.node_modules["react-dom"].lib["Transaction.js"]</TransactionImpl.perform@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:12730:13
require<.node_modules["react-dom"].lib["ReactDefaultBatchingStrategy.js"]</ReactDefaultBatchingStrategy.batchedUpdates@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:21609:14
batchedUpdates@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:11398:10
require<.node_modules["react-dom"].lib["ReactMount.js"]</ReactMount._renderNewRootComponent@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:24136:5
require<.node_modules["react-dom"].lib["ReactMount.js"]</ReactMount._renderSubtreeIntoContainer@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:24217:21
require<.node_modules["react-dom"].lib["ReactMount.js"]</ReactMount.render@http://localhost:3000/packages/modules.js?hash=b2852da4b705e3b46ab5b20c9b94e15e453af050:24238:12
require<.client["main.js"]</</<@http://localhost:3000/app/app.js?hash=d138fc2a4d2ee444a0b4b78d568bc9e3acf71f7c:395:3
Meteor.bindEnvironment/<@http://localhost:3000/packages/meteor.js?hash=e3f53db3be730057fed1a5f709ecd5fc7cae1229:1105:17
._maybeInvokeCallback@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:3557:7
.receiveResult@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:3577:5
._livedata_result@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:4742:7
Connection/onMessage@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:3385:7
._launchConnection/self.socket.onmessage/<@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:2736:11
_.forEach@http://localhost:3000/packages/underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c:149:7
._launchConnection/self.socket.onmessage@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:2735:9
REventTarget.prototype.dispatchEvent@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:175:9
SockJS.prototype._dispatchMessage@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:1160:5
SockJS.prototype._didMessage@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:1218:13
SockJS.websocket/that.ws.onmessage@http://localhost:3000/packages/ddp-client.js?hash=bc32a166cd269e06a394f9418e0024d805bab379:1365:9

Answer 1

你的问题是 ObjectId() meteor 不知道如何处理它。执行以下操作：

export default createContainer(({gameId}) => {
Meteor.subscribe('games');
  console.log(gameId);
  return {
    gameState: Games.find(new Meteor.Collection.ObjectID(gameId)).fetch(),
  };
}, App);

理想情况下，您需要使用 Subscription 作为处理程序：

export default createContainer(({ gameId }) => {
const gamesHandle    = Meteor.subscribe('games');
const isLoadingGames = !gamesHandle.ready()
const gamesState     = Games.find({ _id: gameId }).fetch() // <-- make sure 'Games' is imported or avilable globally
return {
  gamesState,
  isLoadingGames
};
}, App);

然后您可以在 <App /> 组件中访问 this.props.isLoadingGames 并使用它来显示加载:) e.x this.props.isLoadingGames ? 'Loading...' : 'Finished...'

createContainer() 无法通过 ID 检索对象

createContainer() Cannot retrieve object by ID

meteor

mongodb-query

reactjs

meteor-react