javascript - 从反应表引导程序中的json文件获取数据

Question

我有一个来自反应引导表http://allenfang.github.io/react-bootstrap-table/start.html的数据网格。我想从外部 json 文件中获取数据。我已经尝试过了，但在我的表中没有数据。我哪里做错了？

C

lass Grid extends React.Component {
  constructor() {
    super();
    this.state = {
        products:[]
    };
}

  componentDidMount() {
    this.loadData()
}
loadData() {
    $.ajax({
          url: '../Component/products',
          dataType: 'json',
          success: function(products) {
              this.setState({products: products});
          }.bind(this)
        });
}

  handleBtnClick = () => {
    if (order === 'desc') {
      this.refs.table.handleSort('asc', 'name');
      order = 'asc';
    } else {
      this.refs.table.handleSort('desc', 'name');
      order = 'desc';
    }
}

  render() {
    return (
        <div className="content container-fluid">
             <div className="mainTotal container-fluid">
                <div className="col-xs-12">
                    <BootstrapTable tableHeaderClass='my-header-class'  hover data={ this.state.products }  cellEdit={ cellEditProp } selectRow={ selectRowProp } deleteRow={true} insertRow={true}  search={ true } options={ options } pagination>
                        <TableHeaderColumn width='78'  dataField='id' autoValue={ true } headerAlign='center' dataAlign='center'  isKey={ true } > id</TableHeaderColumn>
                        <TableHeaderColumn width='100'  ref='name' dataField='name' dataSort headerAlign='center' dataAlign='center'  editable={ { type: 'textarea' } } filter={ { type: 'TextFilter', delay: 10 ,placeholder: '...' } }> name</TableHeaderColumn>
                   </BootstrapTable>
                </div>
            </div>
        </div>
    );
  }
}
export default Grid;

这是我的 json 文件：

 products = [{
    id: 1,
    name: "name1",

}, {
    id: 2,
    name: "name2",
}, ];