data change but table not load it about react-bootstrap-table HOT 11 CLOSED

Sorry, I didn't describe the question clearly. Yes, componentDidUpdate will not cause render, but my question is not this.
There is an example code, when you click the 'change-data' button, you can see the data change in console log, but the page do not change the data.

class TestPage extends React.Component{
    constructor(){
        super();
        this.state = {dataSet:[
            {"objectName":"sdfsdfsdf33","userId":"cc","perms":["READ","WRITE"],"id":1}
        ]
        }
    }

    render (){
        console.log("this.state.dataSet", this.state.dataSet);
        return (
                    <div className='maxw80 ma'>
                        <BootstrapTable data={this.state.dataSet}
                                        striped={true} hover={true} condensed={false} search={true} pagination={true}>
                            <TableHeaderColumn className='clgrey' dataField="id" isKey={true} dataAlign="center"
                                               dataSort={true}>#</TableHeaderColumn>
                            <TableHeaderColumn dataField="objectName" dataSort={true}>name</TableHeaderColumn>
                            <TableHeaderColumn dataField="userId" dataSort={true}>userName</TableHeaderColumn>
                            <TableHeaderColumn dataField="perms" dataSort={true}
                                               dataFormat={(cell, row)=>(<span>{cell.toString()}</span>)}>
                                auth
                            </TableHeaderColumn>
                            <TableHeaderColumn dataField="id">
                                op
                            </TableHeaderColumn>
                        </BootstrapTable>
                        <button onClick={function(){this.setState({dataSet:[{"objectName":"newdata","userId":"all","perms":["READ"],"id":5}]})}.bind(this)}>change-data</button>
                    </div>
        )
    }
}

from react-bootstrap-table.

Should be &lBootstrapTable data={dataSet} >, reference the Update data on fly

from react-bootstrap-table.

Thank you for replay :) In my project, Actually I do not need "update data on fly" (I use redux for the data state process), and I have to add more code to be compatible with the feature.
I want to use like this, the props.data is passed from redux wrapper:

render(){
<BootstrapTable data={this.props.data}>...</BootstrapTable>
}

But now I have to write more code like this, and the page will render one more time for update:

    constructor(){
        super();
        this.dataSet = new TableDataSet([]);
    }
 componentDidUpdate(){
        this.dataSet.setData(this.props.data); 
    }
render(){
<BootstrapTable data={this.dataSet}>...</BootstrapTable>
}

Maybe there is a better way to solve this?

from react-bootstrap-table.

If you dont want to use the "update on fly", you just dont use TableDataSet

So your code maybe look like as follow

constructor(){
        super();
        this.data = [];
    }
 componentDidUpdate(){
        this.data = this.props.data
    }
render(){
<BootstrapTable data={this.data}>...</BootstrapTable>
}

from react-bootstrap-table.

hi @AllenFang, this does not work when this.data change. When this.data change from the props, the table still display the old data.

from react-bootstrap-table.

I will write an example later :)

from react-bootstrap-table.

OK, and I've a question about your program. According to you code, you mean if your component did updated, you need render? I think your code maybe is wrong. I suggest you do not use this.data in react component and use React state instead.

from react-bootstrap-table.

OK, I understand. In my design principal, your case should use the TableDataSet.setData() to make the table render when your data change. I think the Update data on fly is the better way for user. The reason is if you use TableDataSet.setData() to update table data, you can design a much stateless component which wrap the react-bootstrap-table

But your case is also much common and will be an great enhancement for react-bootstrap-table , I will spend some time to think and improve this problem.

from react-bootstrap-table.

Hi @chuchengcao, I've release v0.9.8 and fix this issues.

from react-bootstrap-table.

v0.9.8 works! Thank you:)

from react-bootstrap-table.

@AllenFang
to apply server side pagination, i set data ={this.state.data}. in

_

_> '<BootstrapTable

      remote
      data={this.state.data}
      striped hover pagination
      search multiColumnSearch
      cellEdit={cellEditProp}
      fetchInfo={{ dataTotalSize: 70 }}
      options={options}
    >
      <TableHeaderColumn dataField='_id' isKey hidden>ID</TableHeaderColumn>          
      <TableHeaderColumn dataField='sessionDatetime'  >  Session Time    </TableHeaderColumn>
      <TableHeaderColumn dataField='status' >Status</TableHeaderColumn>
    </BootstrapTable>'__

but on click on page=3 , state is changing correctly but table data is not changing. As initial value of my this.state.data=[]. so in the table, no data display message is showing rather change data of my state

I am using "version": "4.1.3",

from react-bootstrap-table.