Как загрузить новые данные в React- bootstrap -table2 - PullRequest
Новая
       25

Как загрузить новые данные в React- bootstrap -table2

0 голосов
/ 14 июля 2020

С помощью этого кода таблица заполняется. Я пытаюсь загрузить новые данные в таблицу, нажав кнопку «Загрузить новые данные», которая вызовет обработчик «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>
  );
}
}

1 Ответ

0 голосов
/ 14 июля 2020

Работало после загрузки данных с установщиком состояния this.setState. 

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