如何将新数据加载到react-bootstrap-table2

Question

使用此代码填充表。我正试图在点击按钮"时将新数据加载到表中；加载新数据"；其将调用"；handleClick"；处理程序和我正在加载新数据"；this.state.MyDataList=require('./data1.json'("但实际的表格显示的是相同的旧数据。为什么新数据没有反映在表中。

import React, {Component} from 'react';
import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.css'
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter , selectFilter} from 'react-bootstrap-table2-filter';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import axios from 'axios';
const { SearchBar } = Search;
export default class Customers extends Component {
constructor(props) {
super(props)
this.state = {MyDataList: require('./data.json'),
"columns" : [{
dataField: 'id',
text: 'Title',
sort: true,
filter: textFilter()
},{
dataField: 'name',
text: name',
sort: true,
filter: textFilter()

},{
dataField: 'age',
text: 'Age'
}]};
}
//function which is called the first time the component loads
componentDidMount() {


}
handleOnExpand = (row, isExpand, rowIndex, e) => {
//My code here
}

**handleClick = () => {
this.state.MyDataList = require('./data1.json');
}**
handleDataChange = ({ dataSize }) => {
this.data = require('./data1.json');
console.log("Hi")
}
render() {
// if (!this.state.MyDataList)
// return (<p>Loading data</p>)
return (<div className="addmargin">
<ToolkitProvider
keyField="Id"
data={ this.state.MyDataList }
columns={ this.state.columns }
search
>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar keyField='Id' data={ this.state.MyDataList }  columns={ this.state.columns }/>
<hr/>
**<button className="btn btn-warning" onClick={ this.handleClick }>Load New Data</button>**
<BootstrapTable onDataSizeChange={ this.handleDataChange } bootstrap4 keyField='Id' data={this.state.MyDataList }  columns={ this.state.columns } striped hover condensed  filter={ filterFactory() } />
</div>
)
}
</ToolkitProvider>
</div>
);
}
}

Answer 1

它在用状态设置器加载数据后工作"this.setState"；。

handleClick = () => {
this.setState({MyDataList : require('./data1.json') })
}