我尝试向ag-grid添加新行，但没有添加。我使用gridAPI.updateRowData方法在ag-grid中创建新行。我创建了一个函数用于在ag-grid中创建新行。我在按钮单击事件上调用了此函数。但在单击新按钮时没有添加行。请提供解决方案。

以下是源代码。

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-

layouts';
import React, {useState} from 'react';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';
import ReactDOM from "react-dom";
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { GridApi, RefSelector } from 'ag-grid-community';
import axios from 'axios';
    
class FirstTab extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          columnDefs: [
              {headerName: "TaskId", field: "TaskId"},
              {headerName: "TaskName", field: "TaskName"},
              {headerName: "Duration", field: "Duration"},
              {headerName: "Hours", field: "Hours"},
              {headerName: "Weightage", field: "Weightage"},
              {headerName: "Description", field: "Description"}
          ],
          rowData: [
            
             
          ]
      }
        this.Rightpane = this.Rightpane.bind(this);
        this.Leftpane = this.Leftpane.bind(this);
        this.onAddRows = this.onAddRows.bind(this);
       
    }
    onGridReady(params){
      this.gridApi = params.api;
      fetch("http://localhost:64155/api/Project").then(res => {
            console.log(res);
            return res.json();
      }).then(rowData => {
            //this.setState({ rowData }); no more this but...
            this.gridApi.setRowData(rowData);
      })
    }

    onAddRows() {
     
      this.gridApi.updateRowData({
        add: [{TaskId: "", TaskName: "", Duration: 0, Hours: 0,Weightage: 0,Description: ""}]
           });
           
          }
            
    Rightpane(){
          
   return (
   
         <div className="ag-theme-alpine" style={{height:1000 , width: 1500}}>
           
           <button className="btn btn-primary mb-3" 
            onClick={this.onAddRow}>New</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button className="btn btn-primary mb-3">Delete</button> &nbsp;&nbsp;&nbsp;&nbsp;
            <button className="btn btn-primary mb-3">Move up</button> &nbsp;&nbsp;&nbsp;&nbsp;
            <button className="btn btn-primary mb-3">Move down</button> &nbsp;&nbsp;&nbsp;&nbsp;
            <AgGridReact defaultColDef={{sortable: true, filter: true,editable: true }}
                pagination={true}
                onGridReady={this.onGridReady}
                columnDefs={this.state.columnDefs}
                  rowData={this.state.rowData}>
                          
            </AgGridReact>
       </div>
   )
   
}
render() {
    return (<div className="App">
<SplitterComponent id="horizontal" height="250px" width='1900px'>
<PanesDirective>
//<PaneDirective size='200px' content={this.Leftpane}/>
<PaneDirective size='200px' content={this.Rightpane}/>
</PanesDirective>
</SplitterComponent>
</div>);
}
}
 
export default FirstTab;