Populate Meteor React Formular mit vorhandenen Daten

Question

Ich bin neu mit Meteor reagieren und ich habe Probleme, ein Formular zu erhalten, mit vorhandenen Daten, die aus einer veröffentlichten Sammlung geladen wird. Ich veröffentliche erfolgreich die Sammlung, aber wenn ich versuche, auf profileCandidate im Konstruktor this.state zuzugreifen, wird das Formular nicht geladen. Kann mir jemand zeigen, was ich hier falsch mache?

Collection: profileCandidate

{ 
    "_id": "JGw6dTHG3RDjDQNXc", 
    "userId": "fYHKGTRhZvPKCETHQ", 
    "createdAt": "2017-04-25T12:05:30.449Z", 
    "name": { 
    "first": "John", 
    "last": "Doe" 
    } 
} 

Komponente: ‚ProfileCandidateForm.jsx`

class ProfileCandidateForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     firstName: [], 
     lastName: [] 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    const target = event.target; 
    const value = target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    profileCandidate = this.state; 

    Meteor.call('profileCandidate.insert', profileCandidate); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit.bind(this)}> 
     <label> 
      Name: 
     </label> 
     <input 
      type="text" 
      name="firstName" 
      value={this.state.firstName} 
      onChange={this.handleChange} 
      placeholder="First name" 
     /> 
     <input 
      type="text" 
      name="lastName" 
      value={this.state.lastName} 
      onChange={this.handleChange} 
      placeholder="Last name" 
     /> 
     <input 
      type="submit" 
      value="Submit" 
     /> 
     </form> 
    ) 
    } 
} 

ProfileCandidateForm.propTypes = { 
    profileCandidate: PropTypes.object.isRequired, 
} 

export default createContainer(() => { 
    Meteor.subscribe('profileCandidate'); 

    return { 
    profileCandidate: ProfileCandidate.findOne({userId: Meteor.userId()}), 
    }; 
}, ProfileCandidateForm); 

Answer 1

fand ich die Antwort tief vergraben auf der Meteor forum site. findOne ist nicht verfügbar, wenn die Seite zum ersten Mal geladen wird. Um dies zu beheben, müssen Sie ein leeres Objekt zurückgeben. Um das Formular aufzufüllen, müssen Sie die Requisite in die übergeordnete Datei App.jsx laden und die Requisite an die untergeordnete Datei ProfileCandidateForm.jsx übergeben.

Component Child: 'ProfileCandidateForm.jsx`

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

import { ProfileCandidate } from '../api/profileCandidate/profileCandidate.js'; 


export default class ProfileCandidateForm extends Component { 
    constructor(props) { 
    super(props); 

    var profileCandidate = this.props.profileCandidate; 
    var firstName = profileCandidate && profileCandidate.name && profileCandidate.name.first; 
    var lastName = profileCandidate && profileCandidate.name && profileCandidate.name.last; 

    this.state = { 
     firstName: firstName, 
     lastName: lastName, 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    const target = event.target; 
    const value = target.value; 
    const name = target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit.bind(this)}> 
     <label> 
      Name: 
     </label> 
     <input 
      type="text" 
      name="firstName" 
      value={this.state.firstName} 
      onChange={this.handleChange} 
      placeholder="First name" 
     /> 
     <input 
      type="text" 
      name="lastName" 
      value={this.state.lastName} 
      onChange={this.handleChange} 
      placeholder="Last name" 
     /> 
     <input 
      type="submit" 
      value="Submit" 
     /> 
     </form> 
    ) 
    } 
} 

ProfileCandidateForm.propTypes = { 
    profileCandidate: PropTypes.object.isRequired, 
} 

Komponente Parent:' App.jsx`

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

import { ProfileCandidate } from '../../api/profileCandidate/profileCandidate.js'; 

import ProfileCandidateForm from '../ProfileCandidateForm.jsx'; 

class App extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     hideCompleted: false, 
     }; 
    } 

    renderProfileCandidateForm() { 
    let profileCandidate = this.props.profileCandidate; 
    return (
     <ProfileCandidateForm 
     key={this.props.profileCandidate._id} 
     profileCandidate={profileCandidate} 
     /> 
    ) 
    } 

    render() { 
     return (
     <div className="container"> 
      {this.renderProfileCandidateForm()}  
     </div> 
    ); 
    } 
} 

App.propTypes = { 
    profileCandidate: PropTypes.object.isRequired, 
}; 

export default createContainer(() => { 
    Meteor.subscribe('profileCandidate'); 


    return { 
    profileCandidate: ProfileCandidate.findOne({userId: Meteor.userId()}) || {}, 
    }; 
}, App);