Учебник по Meteor React, взаимодействие с mongo не работает

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

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

Что случилось? Что мне не хватает?

Я могу только порекомендовать вам учебник от Эндрю Мида по Udemy (около 10 долларов) за много часов современного обучения. Я не делюсь с ним и не знаю его, но, поскольку вы, кажется, ищете учебное пособие хорошего качества, я подумал, что поделюсь своим личным опытом.

Ivo 15.10.2018 08:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
235
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Фон

В июне 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

Замечательный ответ. Был в отъезде какое-то время, поэтому увидел это только сейчас. Большое тебе спасибо.

yuvi 21.10.2018 23:18

Хотя я все еще немного не понимаю, где разместить код. Где именно создать проверенный метод? В настоящее время также нет цепочки импорта из server/main.js, поэтому я не уверен, где ее использовать. Я пробовал то, что понял, но не работает. Я буду продолжать пытаться понять это, но я бы хотел, чтобы вы могли просто добавить комментарий, определяющий, как должен выглядеть код, опять же - это довольно ново для меня.

yuvi 21.10.2018 23:29

Проверенный метод следует поместить в файл, который будет загружен на сервер. И здесь также вступает в игру цепочка импорта: цепочка импорта означает, что файл, содержащий проверенный метод, должен быть включен в файл main.js сервера или любой другой файл, который включен в main.js сервера (так что это в цепочке включения). Если он не импортирован, он не будет зарегистрирован как метеорный метод, и вызов вашего клиента завершится ошибкой.

Jankapunkt 22.10.2018 00:24

Ok. Спасибо. Я постараюсь найти свой путь оттуда

yuvi 22.10.2018 01:57

Другие вопросы по теме