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。

现在，无需允许/拒绝，您将在对insert failed: Method '/tasks/insert' not found进行分类时得到SomeCollectionOnClient.insert，但是由于此功能已过时（设置时甚至会收到警告），因此需要创建服务器边方法并从客户端调用它以解决此问题：

在服务器上创建此方法，并确保它在来自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
})

请注意，这会将您的组件耦合到服务器端方法，您宁可尝试为您的页面实现一些容器，以处理所有连接/ pub-sub /方法调用活动，而您的组件仅呈现内容。

更多阅读内容/在此答案中使用过：

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交互不起作用

1 个答案: