如何将 JSON 加载到 ag-grid 表中（React）？答案

【问题标题】：How To Load JSON Into an ag-grid Table (React)?如何将 JSON 加载到 ag-grid 表中（React）？
【发布时间】：2021-09-13 17:51:57
【问题描述】：

我是使用 ag-grid 的新手，并且正在将它实施到我的 React 项目中。有了这个，我制作了下表：

class Table extends Component {
   constructor(props) {
     super(props)

     this.state = {
        columnDefs: [
            { headerName: "Column 1", field: "col1"},
        ],
        rowData: [
            { 'col1': 'Hello'},
            { 'col1': 'World'},
        ],
      }
   }

   render() {
      return (
        <div className="ag-theme-alpine" style={{ height: 400, width: 605 }}>
            <AgGridReact
                columnDefs={this.state.columnDefs}
                rowData={this.state.rowData}>
            </AgGridReact>
        </div>
      );
    }
};

现在，我可以使用.fetch 获取 JSON，并希望将 JSON 值加载到我的表中。例如，假设我的 JSON 是这样输入的：

{'col1': 'Jeff',
 'col1' : 'Sophie',
 'col1' : 'Kelly'}

如何将这些值加载到上面的表格中？我尝试将以下 componentDidMount 方法添加到表中，但表随后会自行变灰并显示“正在加载...”并且永远不会完成加载：

 componentDidMount(){
      myData= getData()  //method calls fetch and returns my JSON items
      this.setState({
            rowData: myData
       });
  }

【问题讨论】：

标签： javascript reactjs ag-grid

【解决方案1】：

根据您提供的代码，我看不到会导致此问题的任何内容。这可能与您的 getData 函数有关。

通过调用fetch，查看在componentDidMount 上设置rowData 的示例： https://plnkr.co/edit/K2gC2Qc6tKc3huTT

  componentDidMount() {
    const updateData = (data) => {
      this.setState({ rowData: data });
    };

    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => updateData(data));
  }

【讨论】：