-1

我正在尝试使用 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>
        )
    }
}

在 console.log 上:

状态:对象 {帖子:数组 [0]}

状态:对象{帖子:承诺}

postsApi.js:7 所有帖子:[对象,对象,对象,对象,对象,对象...]

问题是 ajax 请求在componentDidMount.

4

1 回答 1

1

您的PostsPage组件未正确设置以收听来自商店的更改。您拥有的代码只会在首次安装时抓取一次帖子列表。您希望它在商店获得新数据时更新。

为此,您需要利用您在 Store 中设置的添加/删除更改侦听器功能。它应该看起来像这样;

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>
        )
    }
}
于 2016-09-18T16:36:37.463 回答