не может понять, почему данные не будут загружаться в 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(); 

Когда я console.log сообщений в функции помощника, я получаю правильные данные. Но когда I 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 как есть. Вместо этого просто используйте свой помощник прямо так:

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