reactjs - React Bootstrap 远程行插入

Question

一旦成功存储在数据库中，我正在尝试将行插入表中。

我收到以下错误：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

我已将“rowKey="id" 参数添加到表组件中，但我仍然面临同样的问题。

import React, { Component} from "react";
import editImage from '../../src/images/edit.png';
import './Payrolls.css';
import {BootstrapTable,TableHeaderColumn, RemoteInsertRow} from 'react-bootstrap-table';
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'
import { Link } from 'react-router-dom'
import axios from "axios";
var currentComponent = null;



class Payrolls extends Component {

    componentDidMount() {
        this.getData();
    }

    constructor(props, context) {
        super(props, context);
         this.tableData = [Array]
        this.state = {
            tableData: [],
            selected: []
        };
        this.getData = this.getData.bind(this);
        this.onAddRow = this.onAddRow.bind(this);
    }

getData = () => {
  var self=this;
  axios.get('http://******.co.uk/payrolls.php', {
    })
    .then(function (response) {
       self.state.tableData.push(response.data)
      self.setState({tableData: response.data});
    })
    .catch(function (error) {
     self.props.history.push('/login');
      console.log(error);
    });
}

dateValidator(value, row) {
 if(value === ""){
  return 'You must select a date!';
 }else{
   return true;
 }
}

onAddRow = (row) => {
  // Save to server and on success:
  this.state.tableData.push(row)
  this.setState({
    tableData: this.tableData
  });
}

  render() {

    const { tableData } = this.state;

    const selectRowProp = {
        mode: 'checkbox'
    };

    function editButton(cell, row){
        if(row.status !== "Complete") {
            return (<img alt="logo" className="imageIcon" src={editImage}/>);
        }
    }

  return (


<div className="grid-item-dashboard-title">
    Active Payrolls
                    </div>
<div className="payroll-table">
<BootstrapTable data={ this.state.tableData }   remote={ true } insertRow={ true } pagination={ true } deleteRow={ true }  selectRow={ selectRowProp } options={ { onAddRow: this.onAddRow } } striped hover rowKey="id">
          <TableHeaderColumn dataField='id' autoValue ={true}  isKey={ true } hidden hiddenOnInsert>Payroll ID</TableHeaderColumn>
          <TableHeaderColumn dataAlign="center" dataField='creation_date' hiddenOnInsert>Creation Date</TableHeaderColumn>
          <TableHeaderColumn dataAlign="center" dataField='created_by' hiddenOnInsert>Created By</TableHeaderColumn>
          <TableHeaderColumn dataAlign="center" dataField='week_ending'  editable={ { type: 'date' ,validator: this.dateValidator} } >Week Ending</TableHeaderColumn>
          <TableHeaderColumn dataAlign="center" dataField='status' hiddenOnInsert>Status</TableHeaderColumn>
          <TableHeaderColumn dataAlign="center" dataFormat={editButton}></TableHeaderColumn>
      </BootstrapTable>
</div>
    </div>
  );
}
}

export default Payrolls;

标签： reactjsbootstrap-4