ReactJS推送数组类型状态的正确方法

时间:2016-08-11 12:53:10

标签: javascript reactjs

我有一个空状态数组,当我尝试使用react-addons-update更改状态时,我收到此错误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> } } 。这是代码:

sudo add-apt-repository ppa:webupd8team/sublime-text-3

那么在状态下推送数组的正确方法是什么?

1 个答案:

答案 0 :(得分:2)

尝试使用this.setState(update(this.state, {bunny: { $push: hiren } }))
并且您在forEach中使用异步函数。在调用setState时,变量hiren将为空。