Javascript 反应通量负载初始状态

我试图在axios的al React Flux应用程序中发出一个Ajax请求，在设置状态后获取数据

我在根应用程序中有以下代码：

InitialData.getInitialPosts();

API请求如下所示：

let PostsApi = {
    getAllPosts(){
        return axios.get('https://jsonplaceholder.typicode.com/posts')
            .then( (response) => {
                console.log('All posts: ', response.data)
                return response.data;
        });
    }
}

export default PostsApi;

在actions/initialData.js中，我有以下内容：

let LoadInitialData = {
    getInitialPosts(){
        Dispatcher.dispatch({
            actionType: 'LOAD_INITIAL_POSTS',
            initialPosts: {
                posts: PostsApi.getAllPosts()
            }
        })
    }
}

export default LoadInitialData;

店内：

let _posts = [];
const PostsStore = Object.assign({}, EventEmitter.prototype, {

    addChangeListener(callback){
        this.on('change', callback)
    },

    removeChangeListener(callback){
        this.removeChangeListener('change', callback)
    },

    emitChange(callback){
        this.emit('change', callback)
    },

    getAllPosts(){
        return _posts;
    }
});

Dispatcher.register(function(action){

    switch(action.actionType){
        case 'LOAD_INITIAL_POSTS':
            _posts = action.initialPosts.posts;
            PostsStore.emitChange();
            break;

        default:
    }

});

鉴于：

export default class PostsPage extends React.Component {

    constructor(){
        super();

        this.state = {
            posts: []
        }
    }

    componentDidMount(){
        this.setState({
            posts: PostsStore.getAllPosts()
        });
    }

    render(){        
        const { posts } = this.state;
        return(
            <div>
                {posts.map( post => {
                    return <h3 key={post.id}>{post.title}</h3>
                })}
            </div>
        )
    }
}

导出默认类PostsPage扩展React.Component{
构造函数（）{
超级（）；
此.state={
员额：[]
}
}
componentDidMount（）{
这是我的国家({
posts:PostsStore.getAllPosts（）
});
}
render（）{
const{posts}=this.state；
返回(
{posts.map（post=>{
返回{post.title}
})}
)
}
}

在console.log上：

状态：对象{posts:Array[0]}

状态：对象{posts:Promise}

js:7所有帖子：[对象，对象，对象，对象，对象，对象…]

---

问题是ajax请求在

componentDidMount

之后，您的

PostsPage

组件没有正确设置以侦听存储区中的更改。您拥有的代码在第一次挂载时只会获取一次帖子列表。您希望它在商店获得新数据时更新

要实现这一点，您需要利用在应用商店中设置的添加/删除更改侦听器函数。它应该看起来像这样

export default class PostsPage extends React.Component {

    constructor(){
        super();

        this.state = {
            posts: []
        }
    }

    _calculateState(){
        this.setState({
            posts: PostsStore.getAllPosts()
        });
    }

    componentDidMount(){
        PostsStore.addChangeListener(this._calculateState);
    },

    componentWillUnmount(){
        PostsStore.removeChangeListener(this._calculateState);
    },

    render(){        
        const { posts } = this.state.posts;
        return(
            <div>
                {posts.map( post => {
                    return <h3 key={post.id}>{post.title}</h3>
                })}
            </div>
        )
    }
}

导出默认类PostsPage扩展React.Component{
构造函数（）{
超级（）；
此.state={
员额：[]
}
}
_房地产（）{
这是我的国家({
posts:PostsStore.getAllPosts（）
});
}
componentDidMount（）{
PostsStore.addChangeListener（此._）；
},
组件将卸载（）{
PostsStore.removeChangeListener（此._）；
},
render（）{
const{posts}=this.state.posts；
返回(
{posts.map（post=>{
返回{post.title}
})}
)
}
}

这里没有足够的信息。你想发生什么事？发生了什么事？显示失败点的相关代码在哪里？我给你更多信息，谢谢。