如何在Meteor和React中更新数据？

Question

I started using Meteor and React Js in my work and I'm a beginner with both of them. I am building a blog and I need to update the posts but I'm having problems when updating the data, the data is not saved in the collection. I have the following collection: Posts(title,slug,content,author,category and tags[]). The fields I need to update are: title,content,author,category and tags[]. So far I've tried to solve this but with no positive results. I use Astronomy as a Schema. Hope someone can give an advice. Here is the code:

import ....other imports
import { Posts } from '../../lib/collections.jsx';

class PostManager extends Component {
 constructor(props) {
  super(props);
  this.state = {
    title: props.post.title,
    content: props.post.content,
    category: props.post.category,
    tags: props.post.tags,
    slug: props.post.slug,
    author: props.post.author,
  };
 this.updatePost = this.updatePost.bind(this);
}
 updatePost(event) {
  event.preventDefault();
  const post = this.props.post;
  const title = this.state.title.defaultValue;
  const slug = this.state.slug.defaultValue;
  const content = this.state.content.defaultValue;
  const category = this.state.category.defaultValue;
  const tags = this.state.tags.defaultValue;
  const author = this.state.author.defaultValue;

  post.set({
  title,
  content,
  category,
  tags,
  slug,
  author,
});
if (post.validate(false)) {
  const id = post.save();
  console.log(id);
}
console.log(post.getValidationErrors(false));
}
render() {
 return (
  <div>
    <h1>MANAGER Post View</h1>
    <form
      className="new-resolution"
      onSubmit={this.updatePost}
    >
      <p>Title:</p>
      <input type="text" ref="title" 
       defaultValue={this.state.title}         
    />
      <p>Text:</p>
      <input type="text" ref="content" 
         defaultValue={this.state.content} />
      <p>Category:</p>
      <input type="text" ref="category" 
          defaultValue={this.state.category} />
      <p>Author:</p>
      <input type="text" ref="author" 
         defaultValue={this.state.author} />
      <p>Tags:</p>
      <input type="text" ref="tags" defaultValue={this.state.tags} />
      <button>Update Post</button>
    </form>
  </div>
  );
 }
}
PostManager.propTypes = {
 ready: PropTypes.bool.isRequired,
};

export default createContainer(() => {
const slug = FlowRouter.getParam('slug');
const handle = Meteor.subscribe('posts');
return {
  ready: handle.ready(),
  post: Posts.find({ slug }).fetch()[0],
  };
 }, PostManager);

Some of the errors that I get are: property map undefind and invariant violation, attempt to update PostManager.

Answer 1

I was able to make it work and update the data, this is the correct answer:

class PostManager extends Component {
 constructor(props) {
  super(props);
  console.log(props);
   this.state = {
     title: props.post.title,
     content: props.post.content,
     category: props.post.category,
     tags: props.post.tags,
     slug: props.post.slug,
     author: props.post.author,
   };
   this.updatePost = this.updatePost.bind(this);
 }
 updatePost(event) {
  event.preventDefault();
  const post = this.props.post;
  const title = this.refs.title.value.trim();
  const slug = this.state.slug;
  const content = this.refs.content.value.trim();
  const category = this.refs.category.value.trim();
  const tags = this.state.tags;
  const author = this.refs.author.value.trim();

  post.set({
    title,
    content,
    category,
    tags,
    slug,
    author,
  });

  if (post.validate(false)) {
    const id = post.save();
    console.log(id);
  }
  console.log(post.getValidationErrors(false));
 }

 handleCheckboxListUpdate(tags) {
  this.state.tags = tags;
  this.setState(this.state);
 }

 render() {
   return (
     <div>
       <h1>MANAGER Post View</h1>
       <form
        className="new-resolution"
        onSubmit={this.updatePost}
       >
        <p>Title:</p>
        <input 
          ref="title" 
          type="text" 
          defaultValue={this.state.title} 
        />
        <p>Text:</p>
        <input 
          ref="content" 
          type="text" 
          defaultValue={this.state.content} 
        />
        <p>Category:</p>
        <input 
          type="text" 
          ref="category" 
          defaultValue={this.state.category} 
        />
        <p>Author:</p>
        <input 
          ref="author" 
          type="text" 
          defaultValue={this.state.author} 
        />
        <p>Tags:</p>
        <input 
          type="text" 
          ref="tags" 
          defaultValue={this.state.tags} 
        />
        <button>Update Post</button>
      </form>
    </div>
    );
   }
  }
}