data change but table not load it

Code is like this:

<BootstrapTable data={this.props.data}>

when this.props.data change , BootstrapTable does not load it. I think the feature dataSet.setData cause the problem?

[chuchengcao]

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>
        )
    }
}

[anitaIncaendo]

@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”,