Meteor + React在用户内部迭代文档

时间:2017-08-30 21:58:52

标签: reactjs meteor

我有几天与meteor +做反应,而我却试图在用户集合中显示文档列表。

每个Meteor.user都有一个“Customers”对象数组。我可以在用户中插入新客户,但不会迭代这个客户。

这是我的组件代码:

CustomersForm.js

export class CustomersForm extends Component {

  addCustomer(event) {
    event.preventDefault();
    const name = this.refs.name.value.trim();
    const rut = this.refs.rut.value.trim();
    const phone = this.refs.phone.value.trim();
    const mail = this.refs.mail.value.trim();
    const website = this.refs.website.value.trim();
    const contact = this.refs.contact.value.trim();
    const socialmean = this.refs.socialmean.value.trim();

    if (name !== '' && rut !== '') {
      Meteor.call('insertNewCustomer',name,rut,socialmean,phone,mail,website,contact,(err, res) => {
        if(!err) {
          this.refs.name.value = '';
          this.refs.rut.value = '';
          this.refs.phone.value = '';
          this.refs.mail.value = '';
          this.refs.website.value = '';
          this.refs.contact.value = '';
          this.refs.socialmean.value = '';

        }
      });
    }
  }

  render() {

    return (
      <div>
        <h1>Clientes  </h1>
        <form className='new-items' onSubmit={this.addCustomer}>
          Nombre :<input type='text' ref='name' defaultValue='Carovestuario' /> <br/>          
          RUT :<input type='text' ref='rut' defaultValue='76037806-2' /> <br/>
          Razon Social : <input type='text' ref='socialmean' defaultValue='Algodon y poliester LTDA'/><br/>
          Telefono : <input type='text' ref='phone' defaultValue='2257144709'/><br/>
          Mail : <input type='text' ref='mail' defaultValue='pedidos@carovestuario.cl'/><br/>
          Pagina web : <input type='text' ref='website' defaultValue='carovestuario.cl'/><br/>
          Contacto(opcional) : <input type='text' ref='contact' defaultValue='Carolina Molina'/><br/>
          <button type='submit'>Crear Cliente</button>
        </form>
        <h1>Listado Clientes  </h1>
          {
            this.props.customers.map((item) => {
            return <Customer item={item} key={item._id} />
          })}
      </div>

    )
  }
}

export default createContainer(({params}) => {
  let itemsSub = Meteor.subscribe('currentUser');
  let itemsArray;
  itemsArray = Meteor.users.findOne({_id: Meteor.userId()}).customers.fetch();
  return {
    ready: itemsSub.ready(),
    customers: itemsArray
  }
}, CustomersForm);

Customer.js

import React, { Component } from 'react';
import Customers from '../api/Customers';

export default class Customer extends Component {
  render() {
    return (
      <div className='item'>
        <div className='vote-one' >
          <span>{this.props.item.name}</span>
        </div>
      </div>
    )
  }
}

main.js

import { Meteor } from 'meteor/meteor';

import Items from '../imports/api/Items';
import Customers from '../imports/api/Customers';

import '../imports/server/accounts';

Meteor.publish('currentUser', function() {
  return Meteor.users.find({_id: this.userId}, {
    fields: {
      roles: 1,
      customers: 1
    }
  });
});

Meteor.startup(() => {
  // code to run on server at startup
});

错误在容器中:TypeError:无法读取未定义的属性“customers”

Minimongo可以看到User.customers,我尝试了很多方法来访问客户数组,但我无法弄清楚如何。

由于

1 个答案:

答案 0 :(得分:0)

createContainer示例

所示

您必须检查订阅是否准备就绪,以及在访问数据之前是否找到了对象

  const itemsSub = Meteor.subscribe('currentUser');
  const ready = itemsSub.ready();
  const user = Meteor.users.findOne({_id: Meteor.userId()});
  const userExist = ready && !!user;

  return {
    ready,
    customers: (userExist) ? user.customers : []
  }