無法弄清楚為什么數據不會加載到React組件中

Question

這是我的商店：

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

當我從helper函數中進行console.log發布時，我得到了正確的數據。 但是，當我從組件進行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;

Answer 1

我不會PostStore原樣使用您的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>
        )
    }
}