AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.24k stars 783 forks source link

Don't rerender when data is changed. #2064

Open danijel2017 opened 5 years ago

danijel2017 commented 5 years ago

Hello.

Really I can't understand why did not rerender table when data is changed. I added my code in the follow. Really data is updated correctly but table is not rerender. Please teach me if you know this. Thanks.

`import React, { Component } from "react"; import { Link } from "react-router-dom"; import { connect } from "react-redux"; import moment from "moment"; import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table"; import "../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"; import DatePicker from "./DatePicker"; import Dropdown from "./Dropdown"; import NotesModal from "./NotesModal"; import { updateFile } from "../Actions/FileActions";

class TascAdminTable extends Component { state = { focused: false, data: this.props.data };

componentWillReceiveProps(nextProps) { this.setState({ data: nextProps.data }) }

renderFileDetails = (cell, row) => ( <Link to={details/${row.index}}>{row.fileNumber} );

renderDatePicker = (cell, row) => { if(row.index == 45) console.log('estClosingDate: ', row.estClosingDate, ' loanStatus: ', row.loanStatus); return (

)

};

renderLoanStatus = (cell, row, formatExtraData, rowIdx) => ;

renderHoaStatus = (cell, row, formatExtraData, rowIdx) => ;

renderNotes = (cell, row) => ;

updateField(rowIdx, field, value) {

let file = this.state.data[rowIdx];
file[field] = value;
this.setState({ data: this.state.data });

const user =  this.props.user;
const payload = {
  entityId: user.entityId,

  fileNumber: file.fileNumber,
  role: file.role,
  agent: file.agent,
  estClosingDate: file.estClosingDate !== null && file.estClosingDate !== "null" ? moment(file.estClosingDate) : null,
  loanStatus: file.loanStatus,
  hoaStatus: file.hoaStatus,
  notes: file.notes,

  focused: false
};

//console.log('updateField: file: loanStatus:', file['loanStatus'], 'hoaStatus:', file['hoaStatus'], payload);
this.props.updateFile(payload);

}

render() { console.log('updated admin') return ( <BootstrapTable ref="table" data={this.props.data} pagination options={this.props.options} bordered={false} striped containerStyle={{ fontSize: ".8em" }}

Created

<TableHeaderColumn dataField="fid" isKey dataSort={true} dataFormat={this.renderFileDetails} width="10%"

File Number

Role Last Name Property Address preDOCS Status

<TableHeaderColumn dataField="estClosingDate" dataSort={true} width="10%" dataFormat={this.renderDatePicker}

Est. Closing Date <TableHeaderColumn dataField="loanStatus" dataSort={true} width="10%" dataFormat={this.renderLoanStatus}

Loan Payoff Status <TableHeaderColumn dataField="hoaStatus" dataSort={true} width="10%" dataFormat={this.renderHoaStatus}

HOA Payoff Status <TableHeaderColumn dataField="notes" width="10%" dataFormat={this.renderNotes}

Notes ); } }

function mapStateToProps(state) { return { user: state.user }; }

export default connect( mapStateToProps, { updateFile } )(TascAdminTable); `