Wie man Select-Box (die eine Beziehung zwischen Entitäten darstellt) mit Meteor React verwaltet?

Question

Ich benutze Meteor/React, um eine soziale App zu erstellen. Benutzer sind durch eine ManyToOne-Beziehung mit anderen verbunden (ein Benutzer hat einen Vertreter).

Also habe ich eine Mitgliedskomponente gemacht, die eine Vorlage mit einem Formular zurückgibt, um den Vertreter auszuwählen, und eine API erstellt, um einige Aktionen für Benutzer auszuführen.

Alles funktioniert gut, aber die Löschfunktion aktualisiert die Clientseite nicht (ich öffnete ein anderes Fenster mit der Anwendung).

Ich fühle mich wie ich den Punkt mit der Komponente Begriff fehlt, sollte diese Box auch eine Komponente sein? Hier

ist Member.jsx

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Meteor } from 'meteor/meteor'; 

import { Members } from '../api/members.js'; 

// Member component - represents a single member item 
export default class Member extends Component { 
    componentDidMount() { 
    ReactDOM.findDOMNode(this.refs.select_representant).value = this.props.member.representant; 
    } 

    componentDidUpdate() { 
    ReactDOM.findDOMNode(this.refs.select_representant).value = this.props.member.representant; 
    } 

    setRepresentant() { 
    Meteor.call('members.setRepresentant', this.props.member._id, 'oo'); 
    } 

    deleteThisMember() { 
    Meteor.call('members.remove', this.props.member._id); 
    } 

    renderRepresentants() { 
    let representants = Members.find().fetch(); 
    return representants.map((representant) => (
     <option key={representant._id} value={representant._id}>{representant.pseudo}</option> 
    )); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 

    // Find the text field via the React ref 
    const representantId = ReactDOM.findDOMNode(this.refs.select_representant).value.trim(); 
    const representant = Members.findOne({ _id: representantId }); 

    Meteor.call('members.setRepresentant', this.props.member._id, representantId); 
    } 

    render() { 
    return (
     <div> 

     <h3 className="text"> 
      {this.props.member.pseudo} <button className="delete" onClick={this.deleteThisMember.bind(this)}>&times;</button> 
     </h3> 

     <form className="form-horizontal"> 
      <div className="form-group"> 
      <label htmlFor="select_representant" className="col-sm-3 control-label">Représentant</label> 
      <div className="col-sm-7"> 
       <select ref="select_representant" className="form-control custom-select" name="select_representant" onChange={this.handleSubmit.bind(this)}> 
       {this.renderRepresentants()} 
       </select> 
      </div> 
      </div> 
     </form> 

     </div> 
    ); 
    } 
} 

und members.jsx

import { Mongo } from 'meteor/mongo'; 
import { Meteor } from 'meteor/meteor'; 
import { check } from 'meteor/check'; 

export const Members = new Mongo.Collection('members'); 

Meteor.methods({ 
    'members.insert'(pseudo) { 
    check(pseudo, String); 

    Members.insert({ 
     pseudo 
    }); 
    }, 
    'members.remove'(memberId) { 
    check(memberId, String); 

    Members.remove(memberId); 
    represented = Members.find({ representant: memberId }).fetch(); 
    for(representedItem in represented){ 
     Members.update(representedItem, { $set: { representant: null } }); 
    } 
    }, 
    'members.setRepresentant'(memberId, representantId) { 
    check(memberId, String); 
    check(representantId, String); 

    Members.update(memberId, { $set: { representant: representantId } }); 
    }, 
}); 

Answer 1

starten:

deleteThisMember() { 
    Meteor.call('members.remove', this.props.member._id); 
    renderRepresentants(); 
} 

Oder Sie versuchte, Ihre Mitgliederliste auf thie.props zu setzen ?

Answer 2

Da Sie die Members innerhalb der React Render-Funktion abfragen, reagiert es nicht auf die Änderungen in der Datenbank. Sie müssen createContainer vom react-meteor-data verwenden, um die Änderungen in Ihrem Front-End zu sehen:

import { createContainer } from 'meteor/react-meteor-data'; 
... 
export default class Member extends Component { 
    ... 
    renderRepresentants() { 
    let representants = this.props.representants; 
    ... 
    } 
... 
} 

createContainer(() => { 
    return { 
    representants: Members.find().fetch() 
    }; 
}, Member); 

Nun ist die Abfrage richtig reaktiv aktualisiert werden soll, wenn es Veränderungen in der Members Sammlung.