我开始在我的工作中使用Meteor和React Js,而且我是两个人的初学者。我正在建立一个博客,我需要更新帖子,但是我在更新数据时遇到问题,数据没有保存在集合中。我有以下集合:帖子(标题,slug,内容,作者,类别和标签[])。我需要更新的字段是:标题,内容,作者,类别和标签[]。到目前为止,我试图解决这个问题,但没有取得积极成果。我使用天文学作为模式。希望有人能给出建议。这是代码:
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);
我得到的一些错误是:属性映射undefind和不变违规,尝试更新PostManager。
答案 0 :(得分:0)
我能够使其工作并更新数据,这是正确的答案:
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>
);
}
}
}