ReactJS推送陣列類型狀態的正確方法

我有一個空狀態數組，當我嘗試更改狀態時使用react-addons-update我得到了這個錯誤invariant.js:38 Uncaught (in promise) Error: update(): expected target of $push to be an array; got [object Object].(…)。這裏是代碼：ReactJS推送陣列類型狀態的正確方法

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

那麼什麼是正確的方式推陣列狀態？

來源

2016-08-11 pyprism

我認爲你有一個語法錯誤。你可能不會推入兔子。 –

在'this.setState（{bunny：hiren}）;' – Maxx

之前顯示'hiren'的'console.log';我也不會多次調用setState，每次調用setState渲染函數時都不需要if你在單個狀態更新調用俱樂部所有更新 –

嘗試使用this.setState(update(this.state, {bunny: { $push: hiren } }))
而您在forEach中使用異步函數。在調用setState時，變量hiren將爲空。

來源

2016-08-11 13:04:15

ReactJS推送陣列類型狀態的正確方法

回答

相關問題