reactjs - 通过 ReactJs 进行 API 调用，获取 JSON 并在 ag-grid 中显示

Question

编辑：我已经围绕代码进行了实验。修改后的代码如下。现在我在浏览器中收到错误“TypeError：rowData.forEach 不是函数”。当我控制台日志时，在此处输入图像描述，它显示 JSON 数组（我附上了屏幕截图）。我认为问题与 JSON 对象未转换为数组有关。有经验的可以帮忙吗？

修改后的代码

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//import {Grid} from '@ag-grid-community/all-modules';

class App extends Component {
  constructor (props)
  {
    super(props);
    this.state={
      isLoaded: true,
      columnDefs: [{
      headerName: "Id", field: "id"
    }, {
      headerName: "Name", field: "name"
    }, {
      headerName: "Description", field: "description"
    }, {
      headerName: "Price", field: "price"
    },
    {
      headerName: "Firm Name", field: "category_id"
    },
    {
      headerName: "Amount", field: "category_name"
    }
    ],
    rowData: []
  };

  }

  componentDidMount()
  {
        console.log ("entered");
    fetch("http://localhost/api/product/read.php")
      .then (res => res.json() )
      //.then ((result) => {this.setState({rowData: result, isLoaded: true})},
        .then(rowData => this.setState({rowData}),
        (error) => {
          console.log("error");
          this.setState({
            isLoaded: false,
            error

          });
        }
      )
  }

  render() {
    const {error,isLoaded,rowData } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } 
    else if (!isLoaded) {
      return <div>Loading...</div>;
    } 
    else {
      console.log({rowData});
      return (
        <div
        className="ag-theme-balham"
        style={
          {
        height: '800px',
        width: '1200px' }
      }
      >
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
          >
        </AgGridReact>
      </div>
      );
    }
  }
}

export default App;

我一直在尝试从 reactjs 调用 API。我尝试了 fetch、jquery 和 apiox 代码，但出现错误。我实际上想从我们的其他软件之一调用外部 URL，但由于它不起作用，我在 localhost 上创建了一个 php 文件并尝试调用该文件。在每种情况下，它都打印“输入”然后“错误”到安慰。在浏览器中尝试时，外部 api 文件和 localhost 文件都返回 JSON 对象。请参阅下面的代码。

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

class ListOrders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columnDefs: [{
        headerName: "Invoice No", field: "id"
      }, {
        headerName: "Invoice Date", field: "name"
      }, {
        headerName: "Payer Name", field: "description"
      }, {
        headerNAme: "Ship To Name", field: "price"
      },
      {
        headerNAme: "Firm Name", field: "category_id"
      },
      {
        headerNAme: "Amount", field: "category_name"
      }
      ],
      rowData: []
    };
  }

  componentDidMount()
  {
    console.log ("entered");
    fetch("http://localhost/api/product/read.php",{
      mode: "no-cors", 
    method: 'GET', // or 'PUT'
      headers: {
        'Content-Type': 'application/json',
      },
     // body: JSON.stringify(),
    })
      .then(response => response.json())
      .then(
        (response) => {
          console.log("result");
           this.setState( {

            rowData: response.JSON
      //console.log(rowData)
         });
        },
        (error) => {
          console.log("error");
          this.setState({
            isLoaded: true,
            error

          });
        }
      )
  }



  render()
   {
    return (
      <div
        className="ag-theme-balham"
        style={
          {
        height: '800px',
        width: '1200px' }
      }
      >
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}>
        </AgGridReact>
      </div>
    );
  }
}

export default ListOrders ;

标签： reactjsag-grid