ReactJS推送数组类型状态的正确方式
ReactJS correct way to push array type state
我有一个空状态数组,当我尝试使用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>
}
}
那么什么是正确的方式来推数组状态
尝试使用this.setState(update(this.state, {bunny: { $push: hiren } }))
并且您在forEach中使用异步函数。变量hiren
在setState调用时将为空
相关文章:
- 设置两个反应组件之间状态的正确方式
- 限制与AngularJS状态匹配的动态URL参数的最佳方式
- 在angular js中,每次应用程序进入状态时,重新加载状态的最佳方式是什么
- 实现已验证用户更新状态的最佳方式,作为对系统中已更改状态的反应.(ASP.NET MVC网站)
- Ember JS中控制器之间共享状态的正确方式
- 如何以多个目标可以同时处于活动状态的方式实现“滚动间谍”
- 以编程方式切换谷歌日历 API 的忙/闲事件状态
- AngularJS-处理手动输入URL状态的最佳方式
- jQuery Mobile-以编程方式更改单选按钮状态
- 以程序方式设置时,未在视图模型中填充选中状态
- 如何以编程方式触发自定义插件状态
- 通过编程方式改变单选按钮的状态
- 从react组件'数组类型状态属性弹出的正确方式
- 我如何在JavaScript中以编程方式创建的状态之间切换
- 这是在asp.net中显示状态消息的最佳方式
- Ionic如何以编程方式返回状态
- 角度方式'将存储状态添加到应用程序
- ReactJS推送数组类型状态的正确方式
- 纯CSS方式使按钮有两个点击状态
- 设计模块的最佳方式,使其状态易于模拟和测试