Учебник по Meteor React, взаимодействующий с Монго, не работает - PullRequest
0 голосов
/ 14 октября 2018

Я некоторое время пытался научиться создавать мобильные приложения с помощью Javascript, и, честно говоря, я не представляю, как кто-то может что-либо делать.Все сломано.Каждый учебник, который я пробовал, не работал по какой-то причудливой причине.Я в своем уме.

Я наконец решил попробовать быть еще проще и просто сделать самый простой учебник, который я могу найти.Что может пойти не так.Ну, потребовалось всего 3 страницы почти без кода, чтобы полностью перестать работать.Я сделал это , и я не могу ничего вставить в свою базу данных.Мое приложение не получает данных.При попытке добавить новую задачу она добавляется, а затем почти мгновенно исчезает, с сообщением, в котором указано 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 Ответ

0 голосов
/ 14 октября 2018

Учебное пособие действительно устарело и должно быть обновлено.

Справочная информация

В июне 2017 года произошла большая проблема безопасности с выявленными разрешением / отказом иС тех пор эта функция была заблокирована.

Meteor позволил вам определить коллекцию клиентов, которая автоматически синхронизируется с сервером при вызове методов insert, update, remove на клиенте.

Для управления правами доступа была реализована функция разрешить / запретить .

Теперь без разрешения / запрета вы получите 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

...