如何更新Meteor和React中的数据

How to update data in Meteor and React?

本文关键字:React 数据 Meteor 何更新 更新      更新时间:2023-09-26

我开始在工作中使用Meteor和React Js,并且我是这两个工具的初学者。我正在建立一个博客,我需要更新帖子,但我在更新数据时遇到了问题,数据没有保存在集合中。我有以下集合:文章(标题,段塞,内容,作者,类别和标签[])。我需要更新的字段有:title、content、author、category和tags[]。到目前为止,我一直试图解决这个问题,但没有积极的结果。我用天文学作为图式。希望有人能给个建议。这是代码:

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);

我得到的一些错误是:属性映射未绑定和不变冲突,试图更新PostManager。

我能够让它工作并更新数据,这是正确的答案:

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>
    );
   }
  }
}