Вызов метеорных методов в компонентах React

Question

В настоящее время я работаю над проектом, основанным на Meteor в качестве бэк-энда и React в качестве бэк-энда. Я действительно наслаждался простотой, пока я не удалил insecure пакет и приходится иметь дело с метеорными методами. Сейчас мне нужно выполнить базовую операцию вставки, и я просто застрял! У меня есть форма как компонент (на случай, если в конце концов я бы хотел использовать эту форму не только для вставки элементов, но и для редактирования этих элементов), и вот мой код для этой формы:

AddItemForm = React.createClass({
propTypes: {
    submitAction: React.PropTypes.func.isRequired
 },
getDefaultProps() {
    return {
        submitButtonLabel: "Add Item"
    };
},
render() {
    return (
        <div className="row">
            <form onSubmit={this.submitAction} className="col s12">
                <div className="row">
                    <div className="input-field col s6">
                        <input  
                            id="name"
                            placeholder="What" 
                            type="text" 
                        />
                    </div>
                    <div className="input-field col s6">
                        <input 
                            placeholder="Amount" 
                            id="amount" 
                            type="text" 
                         />
                    </div>
                </div>
                <div className="row">
                    <div className="input-field col s12">
                        <textarea 
                            placeholder="Description" 
                            id="description"
                            className="materialize-textarea">
                        </textarea>
                    </div>
                    </div>
                    <div className="row center">
                        <button className="btn waves-effect waves-light" type="submit">{this.props.submitButtonLabel}</button>
                    </div>
                </form>
            </div>
        );
    }
});

Этот кусок кода используется в качестве компонента формы, у меня есть опора submitAction который я использую, скажем, добавить вид:

AddItem = React.createClass({
handleSubmit(event) {
    event.preventDefault();
    const 
        name = $('#name').val(),
        amount = $('#amount').val(),
        description = $('#description').val();
        Items.insert(
            {
                name: name,
                range: range,
                description: description,
                createdAt: new Date(),
                ownerId: Meteor.userId()
            },
            function(error) {
                if (error) {
                    console.log("error");
                } else {
                    FlowRouter.go('items');
                };
            }
        );
    },

    render() {
        return (
            <div className="row">
                <h1 className="center">Add Item</h1>
                    <AddItemForm
                        submitButtonLabel="Add Event"
                        submitAction={this.handleSubmit}
                    />
            </div>
        );
    }
}); 

Как видите, я напрямую получаю значения по идентификаторам, а затем выполняю insert операция, которая работает абсолютно правильно, я даже могу отобразить эти данные. Так что теперь я должен удалить insecure упаковать и перестроить весь стек операций, используя methodsгде я на самом деле застрял. Как я понимаю, все, что я должен сделать, это получить те же данные и после этого выполнить Meteor.call, но я не знаю, как правильно передать эти данные в текущий вызов метода. Я попытался рассмотреть эти данные прямо в теле метода, который не работает (я использовал тот же const установить как в AddItem Посмотреть). Поправьте меня, если я ошибаюсь, но я не думаю, что этот метод что-то знает о том, где я взял данные (или, может быть, я действительно не получаю рабочий процесс метода Метеора), поэтому к этому моменту я получил этот код как мой метод вставки:

Meteor.methods({
    addItem() {
        Items.insert({
            name: name,
            amount: amount,
            description: description,
            createdAt: new Date(),
            ownerId: Meteor.userId()
        });
    }
});

и вот как я изменил свой handleSubmit функция:

handleSubmit(event) {
    event.preventDefault();
    const 
        name = $('#name').val(),
        amount = $('#amount').val(),
        description = $('#description').val();
    Meteor.call('addItem');
},

Также я попытался объявить метод следующим образом:

'addItem': function() {
    Items.insert({
        // same code
    });
}

но это также не сработало для меня. Опять же, насколько я понимаю, проблема не в самих данных, как я писал до того, как они работают insecure Пакет, проблема в том, как, черт возьми, я должен сначала получить эти данные на сервере и сразу после этого передать их клиенту с помощью методов (также консоль не выдает даже предупреждения и сразу после отправки формы страница перезагружается)? Я уже видел некоторые учебники и статьи в Интернете и не нашел решения, надеюсь получить помощь здесь.

Answer 1

Вы можете добавить свои данные в качестве параметров в функцию вызова Meteor. Вы также можете добавить функцию обратного вызова, чтобы проверить успешность вызова.

handleSubmit(event) {
  event.preventDefault();
  const 
    name = $('#name').val(),
    amount = $('#amount').val(),
    description = $('#description').val();
  Meteor.call('addItem', name, amount, description, function(err, res) {
    if (err){
      console.log(JSON.stringify(err,null,2))
    }else{
      console.log(res, "success!")     
    }
  });
},

В ваших метеорных методах:

Meteor.methods({
  addItem(name, amount, description) {

    var Added =  Items.insert({
      name: name,
      amount: amount,
      description: description,
      createdAt: new Date(),
      ownerId: Meteor.userId()
    });

    return Added

  }
});