ReactJS配列の状態をプッシュする正しい方法

Question

私は空の状態の配列を持っています。私はreact-addons-updateを使って状態を変更しようとしましたが、このエラーはinvariant.js:38 Uncaught (in promise) Error: update(): expected target of $push to be an array; got [object Object].(…)です。コードは次のとおりです。

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> 
    } 
} 

状態で配列をプッシュする正しい方法は何ですか？

Answer 1

お試しくださいthis.setState(update(this.state, {bunny: { $push: hiren } }))
あなたのforEachで非同期機能を使用しています。変数hirenは、setStateが呼び出されるまでに空になります。