想不通爲什麼數據將不會加載到陣營組件

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文章中，我得到正確的數據。但是當我從組件中獲得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> 
     ) 
    } 
}