Question

我正在处理包含发送/取消请求功能的应用。我有以下代码：

import React, { Component, PropTypes } from 'react';
import { Events } from '../../api/collections/events.js';
import { Visitors } from '../../api/collections/visitors.js';
import { createContainer } from 'meteor/react-meteor-data';

class Event extends Component {
    handleDelete() {
        Event.remove(this.props.event._id);
    }
    requestInvite() {
        let eid = Events.findOne(this.props.event._id).title;
        Visitors.insert({
            visitor_id: Meteor.userId(),
            visitor_email: Meteor.user().emails[0].address,
            event_name: eid,
        })
        // did it to debug function, returns correct value
        console.log(Visitors.findOne({id: this._id}) + ', ' + Meteor.userId());
    }
    cancelInvite() {
        Visitors.remove(this.props.visitor._id);
    }
    render() {
        const visitor = this.props.visitor.visitor_id;
        const length = Visitors.find({}).fetch().length;
        return (
            <div>
            {this.props.event.owner == Meteor.userId() ?
                <div>
                    <img src={this.props.event.picture} />
                    <span>{this.props.event.title}</span>
                    <button onClick={this.handleDelete.bind(this)}>Delete</button>
                </div> 
            </div> :
            <div>
                <div>
                    <img src={this.props.event.picture} />
                        <span>{this.props.event.title}</span>
            <div>
                            { length > 0 && visitor == Meteor.userId() ?
                                <button onClick={this.cancelInvite.bind(this)}>Cancel Request</button>
                                :
                                <button onClick={this.requestInvite.bind(this)}>Request invite</button>
                            }
                        </div>
                </div>
        </div>
            }
            </div>
        )
    }
}

Event.propTypes = {
    event: PropTypes.object.isRequired,
};
export default createContainer(() => {
    return {
        event: Events.findOne({id: this._id}) || {},
        visitor: Visitors.findOne({id: this._id}) || {},
    };
}, Event)

它非常简单，这个组件显示操作按钮取决于用户的状态（如果当前用户主持此事件，它显示delete相关功能，所以一个，我只是保持简单如它可以用于这个例子）。如果当前用户不是此事件的主机，则组件允许该用户发送（和取消）邀请请求。好的，一切正常，但只有第一个用户点击了Send Request按钮，之后才更改为Cancel Request（我使用不同的浏览器来测试这样的情况）。其他用户也可以点击Send Request，但对于他们来说，它不会更改为Cancel Request（但它仍会将正确的文档添加到Visitors集合，同时我还有一个组件，显示所有访问者，数据是相关的，即ids，电子邮件和事件标题）。我第一次认为这是findOne功能的问题，但我不这么认为，因为console.log(Visitors.findOne({id: this._id}) + ', ' + Meteor.userId());的输出保持正确，这给了我当前用户＆＃39 ; s id和刚刚创建的访问者ID，每个案例都是相同的。我也发现了一种非常奇怪的行为。当应用程序重建时，发送/取消功能可以为每个用户提供支持。我认为我有点接近解决方案，但需要一点点去做。任何帮助将非常感谢！

UPD

很明显，我的问题并不完整，没有描述在此组件中创建的Visitor文档。这是：

{
  "_id": "Qbkhm9dsSeHyge4rT",
  "visitor_id": "qunyJ4sXNfz2w8qeR",
  "visitor_email": "johndoe@gmail.com",
  "event_name": "test",
}

因为您可以看到我从visitor_id抓取Meteor.userId()，这就是为什么我使用this.props.visitor.visitor_id检查当前是否已登录用户的原因id等于特定访问者的ID。

解决方案

问题出在我的查询中，以便在createContainer函数中获取访问者的ID。我将其更改为visitor = Visitors.findOne({visitor_id: Meteor.userId()})，它按我描述的方式工作。

Answer 1

如果不知道您的Visitors收藏文件是如何构建的，那么肯定难以说出来;但是，由于您说文档已正确添加到visitor == Meteor.userId()集合，这会使Visitors返回length > 0，因此true的条件似乎是问题。

问题可能是您设置了const visitor = this.props.visitor.visitor_id;而不是const visitor = this.props.visitor._id;。

Meteor + React，根据用户的操作显示特定内容

1 个答案: