reactjs - 在 devextreme react 网格中使用 Axios 和 react-hooks 进行 CRUD 操作

Question

我想用 CRUD 操作创建一个可编辑的 devextreme 反应网格。对于 API 调用，使用 Axios。

我正在尝试使用 Axios 发送 GET 请求以在网格中显示数据。我可以检索数据，但它没有显示在反应网格中。所以请帮我纠正我在下面代码中所做的错误，以便显示数据。

下面的代码包含 devextreme 反应网格代码。

import React, { useState,useEffect } from 'react';
import Paper from '@material-ui/core/Paper';
import { EditingState } from '@devexpress/dx-react-grid';
import {
  Grid,
  Table,
  TableHeaderRow,
  TableEditRow,
  TableEditColumn,
} from '@devexpress/dx-react-grid-material-ui';

import useAxios from 'axios-hooks';
import axios from 'axios';
const getRowId = row => row.id;

const MedicineCard=()=> {
      const [columns] = useState([
          { name: 'id', title: 'Medicine_Id' },
          { name: 'name', title: 'Medicine_Name' },
          { name: 'dose', title: 'Doses'},
          { name: 'refill', title: 'Refill'},
          { name: 'comments', title: 'Doctorscomments'},
          { name: 'start', title: 'StartDate'},
          { name: 'end', title: 'EndDate'},
        ]);

  const [rows, setRows] = useState([]);
  useEffect(()=>{
    getData();
  },[]
);
    //to retrieve data from database
  const getData = ()=>{
    axios.get('http://localhost:4000/api/medicinedetails')
    .then(response =>{ 
      if(response.data!==[]){
      setRows(response.data)
    }
    })
    .catch (error=> console.error(error));
  }
  console.log(rows) // to check the data retrieved
  
  const commitChanges = ({ added, changed, deleted }) => {
    let changedRows;
    if (added) {
      const startingAddedId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 0;
      changedRows = [
        ...rows,
        ...added.map((row, index) => ({
          id: startingAddedId + index,
          ...row,
        })),
      ];
    }
    if (changed) {
      changedRows = rows.map(row => (changed[row.id] ? { ...row, ...changed[row.id] } : row));
    }
    if (deleted) {
      const deletedSet = new Set(deleted);
      changedRows = rows.filter(row => !deletedSet.has(row.id));
    }
    setRows(changedRows);
  };

  return (
    <Paper>
      <Grid
        rows={rows}
        columns={columns}
        getRowId={getRowId}
      >
        <EditingState
          onCommitChanges={commitChanges}
        />
        <Table />
        <TableHeaderRow />
        <TableEditRow />
        <TableEditColumn
          showAddCommand
          showEditCommand
          showDeleteCommand
        />
      </Grid>
    </Paper>
  );
};

export default MedicineCard;

下面的代码是 App.js

import React from 'react'

import MedicineCard from './MedicineCard'
const Test = () => (
 <MedicineCard />
)
export default Test

这是不显示数据的当前输出

正如您从控制台中看到的，我可以从 API 获取数据......但它没有显示在表格中。

这些是 API 数据。

{
"data":[{"comments":"Day","dose":"2 po daily","end":"1 may 
        2020","id":2,"name":"Aspirin","no_of_times":2,"refill":1,"start":"1 April 2020"}, 
        {"comments":"nil","dose":"only one","end":"1 April 
        2020","id":3,"name":"Morphine","no_of_times":1,"refill":0,"start":"1 April 2020"}
       ]}

请提供解决方案，在 axios 中使用 GET 请求显示数据。

另外请指导我如何从上述可编辑的 devextreme React 网格发送 POST、PUT 和 DELETE 请求

标签： reactjsaxiosreact-hooksdevextreme