-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 で:

状態: オブジェクト {posts: Array[0]}

状態: オブジェクト {posts: Promise}

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 に答える