使用現有數據填充流星React表單

Question

我是React with Meteor的新手，我無法使用從已發佈集合中加載的現有數據填充表單。我成功發佈集合，但是當我嘗試訪問構造函數this.state中的profileCandidate時，表單將無法加載。有人能告訴我我在做什麼錯嗎？

收藏：profileCandidate

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

組件：「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

我發現深埋在流星forum site答案。當頁面第一次加載時，findOne不可用，從而導致錯誤。要解決這個問題，你必須返回一個空的對象。要填充表單，您需要在父文件App.jsx中加載道具並將道具傳遞給子文件ProfileCandidateForm.jsx。

組件子： '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, 
} 

組件父：' 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);