如何更新Meteor和React中的数据
How to update data in Meteor and React?
我开始在工作中使用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>
);
}
}
}
相关文章:
- React中的数据集表示
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React ajax数据集成
- React路由器服务器端渲染和ajax获取数据
- React-将jSON数据传递给子组件的子组件
- 使用createContainer将Meteor数据获取到React Native中时出现问题
- 如何使用React JS中的循环,根据条件渲染或不渲染表数据
- 在React中渲染子对象,丢失道具数据
- 在多个react.js组件中呈现json数据
- 我在哪里从 React Redux 应用程序中的服务器获取初始数据
- React.js+Flux-正确初始化存储中的数据对象
- 使用react.js从api函数获取json数据
- React组件从Flux存储中呈现数据,但从Mongo数据库中提取数据时不呈现
- 在react组件中使用ajax获取实时更新的数据
- 简单的Ajax请求,在React.js中循环数据
- 更新数据时的React.js生命周期
- 如何在 React 中将 html 表单元格数据动态插入到具有动态标题的表中
- 来自 react-redux-universal-hot-hot 示例初学者工具包中的第三方 API 的初始数据加载
- React数据提取不工作
- react数据网格-您可以将自己的组件添加到工具栏中吗