Array push not working as expected in react app

Question

In my React app I am using MobX for state management.After processing ajax response I tried to push to store. But turns out it just not working as expected. Here the codes:

export class Diary {
    @observable loaded = false;
    @observable posts = [];

    @action getPosts() {
        axios({
            method: 'get',
            url: '/api/diary/',
            headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
        }).then(action('response action', (response) => {
            (response.data).map(function (post) {
                let hiren = [];
                hiren['id'] = post['id'];
                hiren['title'] = Crypt.decrypt(post['title'], key, post['iv']);
                hiren['content'] = Crypt.decrypt(post['content'], key, post['iv']);
                hiren['tag'] = post['tag'];
                hiren['date'] = moment.utc(post['date']).local().format("dddd, DD MMMM YYYY hh:mm:ss A");

                this.posts.push.apply(this.posts, hiren);
                console.log(toJS(this.posts)); // empty array so the push is not working
            }.bind(this));
            this.loaded = true;
        })).catch(function(err) {
            console.error(err);
        });
    }
}

I guess here this would not be recognizable as its inside a function just try to assign var self = this before ajax call and inside function use self.posts instead of this — Vinod Louis, Jan 19 '17 at 04:50
You've initialised `hiren` as an Array but then you proceed to set named properties on it. It will still just be an empty array. What exactly do you want `posts` to look like after the operation? — Phil, Jan 19 '17 at 05:00
hiren is an associate array hence it would not extent it to push.apply — Vinod Louis, Jan 19 '17 at 05:00
That's not exactly a good example. I'll ask again... what **exactly** do you want `posts` to look like after the operation? What do you expect to see in your console from `console.log(toJS(this.posts))` — Phil, Jan 19 '17 at 05:07

score 2 · Accepted Answer · answered Jan 19 '17 at 11:37

As per your current code.
1. map is not ideal, use a forEach to iterate through elements
2. Associative arrays are objects {}, not array []. Hence hiren = {};
3. To push into an array, just directly invoke this.posts.push(hiren); against the array.

export class Diary {
    @observable loaded = false;
    @observable posts = [];

    @action getPosts() {
        axios({
            method: 'get',
            url: '/api/diary/',
            headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
        }).then(action('response action', (response) => {

            (response.data).forEach(function (post) {
                /* Associative array is an OBJECT, NOT AN ARRAY ... */
                var hiren = {};
                hiren['id'] = post['id'];
                hiren['title'] = Crypt.decrypt(post['title'], key, post['iv']);
                hiren['content'] = Crypt.decrypt(post['content'], key, post['iv']);
                hiren['tag'] = post['tag'];
                hiren['date'] = moment.utc(post['date']).local().format("dddd, DD MMMM YYYY hh:mm:ss A");

                this.posts.push(hiren);
                console.log(toJS(this.posts)); // empty array so the push is not working
            });

            this.loaded = true;
        })).catch(function(err) {

            console.error(err);
        });
    }
}

Array push not working as expected in react app

1 Answers1