Meteor + React，根據用戶的動作顯示特定內容

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());的輸出保持正確，給我當前用戶的id和剛創建的訪問者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功能來獲取訪問者的IDS。我將其更改爲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;。