Question

我正在尝试在Redux React项目上使用此软件包。 https://www.npmjs.com/package/react-redux-datatable，

我已经安装了此软件包。

就像他们的自述文件一样，我在商店中添加了reducer：

import { DataTableReducer } from 'react-redux-datatable';

我创建了一些用于显示表格的组件：

import React, { Component } from 'react'
import DataTable from 'react-redux-datatable';
import 'react-redux-datatable/dist/styles.css';


const apiLocation = 'https://jsonplaceholder.typicode.com/users';

const tableSettings = {
  tableID: 'BasicDataTable',
  keyField: 'request_id',
  tableColumns: [
    {
      title: 'Ref',
      key: 'request_id',
    },
    {
      title: 'First Name',
      key: 'first_name',
    },
    {
      title: 'Last Name',
      key: 'surname',
    },
    {
      title: 'Email Address',
      key: 'email',
    },
  ],
};


export default class userTable extends Component {
  render() {
    return (
      <div>
         <DataTable
        tableSettings={tableSettings}
        apiLocation={apiLocation}
        />
      </div>
    )
  }
}

当我进入浏览器时，我的表渲染没有数据，然后显示错误：

表无法初始化。请检查您是否已连接到互联网，然后重试。

我认为这是需要更改tableSettings的内容，但是我不完全知道。

此关键属性是从API返回什么？我试图用https://jsonplaceholder.typicode.com/user的确切返回值更改它们，但出现了同样的错误

Answer 1

更新：API响应必须位于specific format中。它必须包含一个键searchSuccess，它是一个布尔值，dataTotalSize键表示数组的长度，而data键则具有实际的数据数组。

API成功2xx响应示例

{
  "searchSuccess": true,
  "dataTotalSize": 2,
  "data": [
    {
      "ref_id":"5",
      "first_name":"Ted",
      "surname":"Corkscrew",
      "type":"Add"
    },
    {
      "ref_id":"26",
      "first_name":"Edwina",
      "surname":"Hosepipe",
      "type":"Add"
    }
  ]
}

您的虚拟API响应中没有"searchSuccess": true,键，这就是FETCH_TABLE_DATA_REJECTED is distached的原因。另外，请注意it makes a POST request到API。

您的API响应和tableSettings不匹配。 tableColumns中的每个键应对应于JSON中的一个键。并且keyField应该是每个对象的唯一标识符。

例如，您的JSON中的用户如下所示：

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
}

因此对应的tableSettings将是：

const tableSettings = {
  tableID: 'BasicDataTable',
  keyField: 'id',
  tableColumns: [
    {
      title: 'ID',
      key: 'id',
    },
    {
      title: 'Name',
      key: 'name',
    },
    {
      title: 'Username',
      key: 'username',
    },
    {
      title: 'Email',
      key: 'email',
    }
  ],
};

我仅以4列为例，根据您的要求在tableColumns中添加更多/更少字段。

React Redux Datatable未能初始化

1 个答案: