React Redux Datatable не удалось инициализировать

Question

Я пытаюсь использовать этот пакет в моем проекте Redux React.https://www.npmjs.com/package/react-redux-datatable,

Я установил этот пакет.

Как и в их readme, я добавляю редуктор в свой магазин:

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 должен быть в определенном формате .Он должен содержать ключ searchSuccess, который является логическим, ключ dataTotalSize, чтобы указать длину вашего массива, и ключ data, чтобы иметь действительный массив данных.

Пример API Success 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"
    }
  ]
} 

Ваш ответ Dummy API не имеет ключа "searchSuccess": true, в своем ответе, поэтому FETCH_TABLE_DATA_REJECTED отклонен .Кроме того, будьте осторожны, отправляет запрос POST к 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 в соответствии с вашими требованиями.