Question

我是React with Meteor的新手，我在填写表单以填充从已发布的集合中加载的现有数据时遇到了麻烦。我成功发布了该集合，但是当我尝试在构造函数profileCandidate中访问this.state时，表单无法加载。有人能告诉我我在这里做错了什么吗？

收藏：profileCandidate

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

组件：＆＃39; 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);

使用现有数据填充Meteor React表单

1 个答案: