Meteor React 教程与 mongo 交互无效

Question

我已经尝试了一段时间来学习如何使用 Javascript 构建移动应用程序，老实说，我不知道任何人都可以做任何事情。一切都被打破。我试过的每一个教程都因为一些奇怪的原因而失败。我没办法。

我终于决定尝试更简单，只做我能找到的最基本的教程。会出什么问题。好吧，只用了3页几乎没有代码就完全停止工作了。我已经完成 this，但无法向我的数据库中插入任何内容。我的应用程序不获取任何数据。当尝试添加一个新任务时，它被添加然后几乎立即消失，并显示一条消息 insert failed: Method '/tasks/insert' not found （甚至没有一些回溯的错误）。

代码真的不能再简单了：

// imports/api/tasks.js

import { Mongo } from 'meteor/mongo';

export const Tasks = new Mongo.Collection('tasks');

// imports/ui/App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTracker } from 'meteor/react-meteor-data'

import { Tasks } from '../api/tasks.js';

import Task from './Task.js';

// App component - represents the whole app
class App extends Component {
    handleSubmit(event) {
        event.preventDefault();

        // find the text field via the react ref
        const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
        Tasks.insert({ text, createdAt: new Date() });

        // Clear form
        ReactDOM.findDOMNode(this.refs.textInput).value = '';
    }

    renderTasks() {
        return this.props.tasks.map((task) => (
          <Task key={task._id} task={task} />
        ));
    }

    render() {
        return (
          <div className="container">
            <header>
              <h1>Todo List</h1>
                <form className="new-task" onSubmit={this.handleSubmit.bind(this)} >
                    <input
                        type="text"
                        ref="textInput"
                        placeholder="Type to add new tasks"
                    />
                </form>
            </header>

            <ul>
              {this.renderTasks()}
            </ul>
          </div>
        );
    }
};

export default withTracker(() => {
  return {
    tasks: Tasks.find({}).fetch(),
  };
})(App);

怎么了？我错过了什么？

Answer 1

教程确实过时了，应该更新。

背景

2017 年 6 月发现了一个 big security issue with allow/deny，此后该功能已被屏蔽。

Meteor 允许您定义客户端集合，当客户端调用方法 insert、update、remove 时，该集合会自动与服务器同步。

为了控制访问权限，allow/deny feature was implemented。

现在没有allow/deny你会在分类SomeCollectionOnClient.insert时得到insert failed: Method '/tasks/insert' not found但是因为这个特性已经过时了（你甚至会在设置它时得到一个很大的警告），你需要创建服务器端方法并从客户端调用它以解决此问题：

在服务器上创建此方法并确保它在来自 server/main.js:

的导入链中

new ValidatedMethod({
  name: 'tasks.insert',
  validate(args) {
    // better use simpl-schema here
    if (!args.text || !args.createdAt) {
      throw new Meteor.Error('incompleteArgs', 'args are incomplete')
    }
  },
  run (args) {
    // check user permissions...
    return Tasks.insert({ text, createdAt })
  }
})

在您的客户端组件中，您可以通过以下方式调用它：

// find the text field via the react ref
const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Meteor.call('tasks.insert', {text, createdAt: new Date()}, (err, res) => {
  // do something on err / on res
})

请注意，这会将您的组件耦合到服务器端方法，您可能宁愿尝试为您的页面实现一些容器来处理所有连接/发布-订阅/方法调用 activity，而您的组件仅呈现内容。

此答案中需要阅读/使用的更多内容：

https://guide.meteor.com/react.html

https://guide.meteor.com/security.html

https://docs.meteor.com/api/methods.html#Meteor-call

https://guide.meteor.com/methods.html#validated-method

Meteor React 教程与 mongo 交互无效

Meteor React tutorial interacting with mongo not working

meteor

reactjs