无法确定数据无法加载到React组件的原因
无法确定数据无法加载到React组件的原因
提问于 2016-08-04 03:20:15
这是我的店铺：
import helper from './../../helpers/RestHelpers.js';
var posts = [];
class PostStore {
constructor() {
helper.get('/api/posts')
.then((data) => {
posts = data;
console.log(posts);
}
);
}
getPosts() {
return posts;
}
};
export default new PostStore();当我从帮助器函数中console.log posts时，我得到了正确的数据。但是当我从组件执行console.log时，帖子数组是空的。
下面是我的组件：
import React from 'react';
import postStore from '../stores/PostStore';
class Home extends React.Component {
constructor() {
super();
this.state = {
posts: postStore.getPosts()
}
console.log(this.state.posts);
}
render() {
return (
<div className="welcome">
{this.state.posts.map(function(post, index) {
return (
<PostItem post={post} key={"post " + index} />
)
})
}
</div>
)
}
}
class PostItem extends React.Component {
render() {
return <div>{this.props.post.postName}</div>;
}
}
export default Home;Stack Overflow用户
回答已采纳
发布于 2016-08-04 08:12:39
我不会按原样使用你的PostStore。相反，只需像这样直接使用你的帮助器：
import React from 'react';
// import your helper!
class Home extends React.Component {
componentDidMount() {
helper.get('/api/posts').then((data) => {
this.setState({posts: data})
});
}
render() {
return (
<div className="welcome">
{this.state.posts.map((post, idx) => <PostItem post={post} key={"post " + idx} />)}
</div>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38751998
复制相关文章
相似问题
腾讯云开发者
