所以在删除除最后一个条目之外的条目后，我在重新渲染我的 firebase 数据库时遇到了问题。它从 firebase 中删除得很好，但是当它重新渲染 react bootstrap 表时，它会抛出 TypeError。下面是错误和我的firebase结构。我处理这个问题的方式有问题吗？我在想也许如果我用它可能修复它的长度的迭代来更新错误的父“id”，但我在更新父级时遇到了麻烦。 tablebody.js 代码的图片不是我的代码，它是用 react-bootstrap-table 编写的。这部分是错误指向的地方。
主页.js
import React, { Component } from 'react';
import { Button, PageHeader } from 'react-bootstrap';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import './reactTable.css';
const Header = () =>
<div>
<PageHeader>Create a Bug/Issue</PageHeader>
</div>
const db = firebase.database().ref('bugs/');
class HomePage extends Component {
constructor(props,context) {
super(props,context);
this.stationBug = this.stationBug.bind(this);
this.issueBug = this.issueBug.bind(this);
this.descBug = this.descBug.bind(this);
this.submitBug = this.submitBug.bind(this);
this.removeBug = this.removeBug.bind(this);
this.updateBug = this.updateBug.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleAssign = this.handleAssign.bind(this);
this.state = {
length: '',
station: '',
bug: '',
desc: '',
value: 'low',
assign: 'admin',
bugs: []
}
}
componentDidMount() {
db.on ('value', (snapshot) => {
const currentBugs = snapshot.val()
if (currentBugs != null) {
this.setState({
bugs: currentBugs
})
}
})
}
stationBug(event) {
this.setState({station: event.target.value});
}
issueBug(event) {
this.setState({bug: event.target.value});
}
descBug(event) {
this.setState({desc: event.target.value});
}
submitBug(event) {
const nextBug = {
id: this.state.bugs.length,
station: this.state.station,
bug: this.state.bug,
desc: this.state.desc,
priority: this.state.value,
assign: this.state.assign
}
firebase.database().ref('bugs/'+nextBug.id).set(nextBug);
}
removeBug(event) {
const idNum = this.state.station;
db.child(idNum).remove();
/*
for (let i = 0; i < this.state.bugs.length; i++) {
this.state.bugs['/id'] = i;
db.update(i);
};*/
}
updateBug(event) {
const idNum = this.state.station;
const descUpdate = this.state.desc;
var updates = {};
updates['/desc'] = descUpdate;
db.child(idNum).update(updates);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleAssign(event) {
this.setState({assign: event.target.value});
}
render() {
return (
<div className="App">
<Header />
<BootstrapTable
ref='table'
data={ this.state.bugs }
pagination={ true }
search={ true }
hover={ true }>
<TableHeaderColumn dataField='id' isKey={true} width="10">Ref ID</TableHeaderColumn>
<TableHeaderColumn dataField='station' width="10" dataSort={true}>Station</TableHeaderColumn>
<TableHeaderColumn dataField='bug' width="25">Bug/Issue</TableHeaderColumn>
<TableHeaderColumn dataField='desc' width="50">Description</TableHeaderColumn>
<TableHeaderColumn dataField='priority' width="50">Priority</TableHeaderColumn>
<TableHeaderColumn dataField='assign' width="50">Assigned To</TableHeaderColumn>
</BootstrapTable>
<input onChange={this.stationBug} type="text" placeholder="Station #" />
<br />
<textarea onChange={this.issueBug} type="text" placeholder="Bug/Issue" />
<br />
<textarea onChange={this.descBug} type="text" placeholder="Bug Description" />
<br />
<select value={this.state.value} onChange={this.handleChange}>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
<br />
<select value={this.state.assign} onChange={this.handleAssign}>
<option value="admin">Admin</option>
<option value="bob">Bob</option>
</select>
<br />
<Button bsSize="large" onClick={this.submitBug} type="submit"> Enter Bug </Button>
<Button bsSize="large" onClick={this.removeBug} type="submit"> Remove Bug </Button>
<Button bsSize="large" onClick={this.updateBug} type="submit"> Update Bug </Button>
</div>
);
}
}
const authCondition = (authUser) => !!authUser;
export default withAuthorization(authCondition)(HomePage);
//export default HomePage;