ReactJS correct way to push array type state

Question

I have an empty state array, when I try to change the state using react-addons-update I got this error invariant.js:38 Uncaught (in promise) Error: update(): expected target of $push to be an array; got [object Object].(…) . Here is the code :

import React from 'react';
import ReactDOM from 'react-dom';
import Helmet from "react-helmet";
import axios from 'axios';
import { browserHistory } from 'react-router';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {encrypt, decrypt} from '../utils/pgp.js';
import update from 'react-addons-update';


export default class Passwords extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bunny: [],
            loaded: false
        }
    }

    componentDidMount = () => {
        (async function(){
            let bugs = await axios.get('/api/vault/', {
                headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
            });
            let hiren = [];
            bugs.data.forEach(async data => {
                let temp = {};
                temp['id'] = data.id;
                temp['site_url'] = data.site_url;
                temp['tag'] = data.tag;
                temp['email'] = await decrypt(sessionStorage.getItem('key'), data.email);
                temp['username'] = await decrypt(sessionStorage.getItem('key'), data.username);
                temp['password'] = await decrypt(sessionStorage.getItem('key'), data.password);
                temp['note'] = await decrypt(sessionStorage.getItem('key'), data.note);
                temp['created_at'] = data.created_at;
                temp['updated_at'] = data.updated_at;

                hiren.push(temp);
            });
            //this.setState({bunny: hiren}); <-- renders empty table
            this.setState(update(this.state, {$push: hiren}));
            this.setState({loaded: true});
            console.log(this.state.bunny);
        }.bind(this))();
    }

    render() {

        function anchor(cell, row){
            let a;
            if (cell.startsWith('http://'))
                a = cell.slice(7);
            else if (cell.startsWith('https://'))
                a = cell.slice(8);
            return '<a href=' + cell + '>' + a + '</a>' ;
        }
        if(this.state.loaded) {
            return (
                <div>
                    <Helmet
                        title="Vault-> Passwords"
                    />
                    <BootstrapTable data={this.state.bunny} striped={true} hover={true} condensed={true} pagination={true} search={true}>
                        <TableHeaderColumn dataField="id" isKey={true}>ID</TableHeaderColumn>
                        <TableHeaderColumn dataField="site_url" dataFormat={anchor} dataSort={true}>URL</TableHeaderColumn>
                        <TableHeaderColumn dataField="email">Email</TableHeaderColumn>
                        <TableHeaderColumn dataField="username">Username</TableHeaderColumn>
                        <TableHeaderColumn dataField="password">Password</TableHeaderColumn>
                        <TableHeaderColumn dataField="note">Note</TableHeaderColumn>
                        <TableHeaderColumn dataField="tag">Tag</TableHeaderColumn>
                        <TableHeaderColumn dataField="created_at">Created At</TableHeaderColumn>
                        <TableHeaderColumn dataField="updated_at">Updated At</TableHeaderColumn>
                    </BootstrapTable>
                </div>
            )
        }
        return <div>loading.... </div>
    }
}

So what is the correct way to push arrays in state ?

I think you have a syntax error. You're probably not pushing into bunny. — Jeff P Chacko
– Jeff P Chacko, Commented Aug 11, 2016 at 13:01
show console.log of hiren just before this.setState({bunny: hiren}); — Maxx
– Maxx, Commented Aug 11, 2016 at 13:02
also i would dont call setState multiple times, each time you call setState render function is called which is not required if you club all updates in a single state update call — Harkirat Saluja
– Harkirat Saluja, Commented Aug 11, 2016 at 13:05
@pyprism well, it means nothing pushed to your array, try to console log bugs, may be you get empty response from server — Maxx
– Maxx, Commented Aug 11, 2016 at 13:23

Jeff P Chacko · Accepted Answer · 2016-08-11 13:04:15Z

2

Try with this.setState(update(this.state, {bunny: { $push: hiren } }))
And you are using async functions in your forEach. variable hiren will be empty by the time setState is called.

answered Aug 11, 2016 at 13:04

Jeff P Chacko

5,0185 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS correct way to push array type state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related