Как правильно получить и отобразить значения объекта JSON в datatable в ReactJS?

Question

Я очень новичок в ReactJS и особенно с его интеграцией с Redux. Я использую fetch для получения записей БД. Это на самом деле возвращается успешно. Моя проблема заключается в попытке взять этот объект и отобразить отдельные записи в таблице данных, как только он вернется к компоненту.

import React from 'react';

import BootstrapTable from 'react-bootstrap-table-next';
import { jobActions } from '../../actions/job.actions';

class LoadTable extends React.Component {

    componentDidMount() {

    }
    componentWillUnMount() {

    }

    render() {
        const jobs = jobActions.getJobs();
        console.log(jobs);

        const columns = [{
            dataField: 'ID',
            text: 'ID',
            sort: true
        }, {
            dataField: 'Name',
            text: 'Name',
            sort: true
        }, {
            dataField: 'Script',
            text: 'Script'
        }];

       return (
            <div>
                <BootstrapTable
                    keyField = "id"
                    data = {jobs}
                    columns = {columns}
                    striped
                    hover
                    condensed
                />

            </div>
           );
    }      
}

export default ( LoadTable );
====================================================================
Action

import { jobService } from '../services/job.service';
export const jobActions = {
    getJobs
};

function getJobs() {

    //return dispatch => {
    console.log('Action begin');
    jobService.getJobs()
        .then(
            results => {
                return { results };                
            }, error => {
                return { error };
            }
        );
    //};   
}

====================================================================
Service
import { HandleResponse, Logout } from '../helpers/utils';
export const jobService = {
  getJobs
};

function getJobs() {
    const requestOptions = {
        method: 'GET',
        headers: new Headers({
            'Content-Type': 'application/json; charset=utf-8'
        }),
        //body: JSON.stringify({
        //    Username,
        //    Password
        //})
    };
    const requestPath = "http://localhost:53986/api/jobs/getoutput";
    console.log('Start Fetching');
    return fetch(requestPath, requestOptions)
        .then(HandleResponse)
        .then(response => {
            return { response };
        }).catch(function (error) {
            return Promise.reject(error);
        });
}
===================================================================

Ожидаемый результат - возможность отображать записи из базы данных, как только она вернется в таблицу загрузки.

Answer 1

взгляните на это: https://codepen.io/ichadw/pen/QPBRgN

если ваш API ответа JSON, то сначала вы должны проанализировать ответ как данные JSON, а затем вернуть данные.Кроме того, о получении данных javascript и о том, как правильно их реализовать, я рекомендую вам прочитать это https://www.robinwieruch.de/react-fetching-data/