代码之家 › 专栏 › 技术社区 › yuvi

Meteor React教程与mongo交互不工作

meteor reactjs

yuvi · 技术社区 · 6 年前

我已经尝试了一段时间来学习如何用Javascript构建移动应用程序,老实说,我不知道如何有人能够做任何事情。一切都坏了。我尝试过的每一个教程都因为一些奇怪的原因而失败。我束手无策。

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);

怎么了?我错过了什么?

1 回复 | 直到 6 年前

Jankapunkt 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