Kann nicht herausfinden, warum die Daten nicht in der Komponente

Question

Hier Reagieren geladen ist mein Speicher:

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

Wenn ich console.log Beiträge in Helfer-Funktion, erhalte ich die richtigen Daten. Aber wenn ich console.log von der Komponente, ist das Array von Posts leer.

Hier ist meine Komponente:

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

würde ich nicht benutzen, um Ihre PostStore wie sie ist. Verwenden Sie stattdessen einfach Ihren Helper direkt wie folgt:

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