Почему данные из API не показаны в таблице на приложение ReactJS

голоса
0

Я строй приложения ReactJS, который должен показать таблицу населенной из данных от API. API содержит рейсы данных, разделенных прилетов / вылетов. Я не получаю сообщение об ошибке в этот момент, но пустой экран без строк. Я не уверен, что я сделал неправильно. На вкладке Сеть в Дев инструментов, я вижу JSON с все данные, поэтому я уверен, что API обрабатывается. Но на экране ничего и без ошибок от React. Я застрял с этим. Я разделял код, если что-то я пропускаю я отредактировать, добавив, что вам потребуется, если что-то не ясно.

JSON я получаю (только образец):

{
arrivals: [
{
id: 118927,
time: 11:05,
date: 2018-10-20,
expected: 15:00,
airline: Norwegian,
arriving_from: Prague, Czechia - Vaclav Havel Airport Prague,
flight_no: D83581,
gate: A20,
terminal: ,
status: Baggage
},

Мой компонент:

import React from 'react';
import FilterableTable from 'react-filterable-table';

const FlightComponent = (props) => {
    const renderTime = (props) => {
        if (!props.value) {
            return null;
        }
        const date = new Date(props.value);
        const formatTime = ('0' + date.getUTCHours()).slice(-2) + : + ('0' + date.getUTCHours()).slice(-2);

        return (
            <span>{formatTime}</span>
        );
    };

    const fields = [
        { name: 'time', displayName: Time, inputFilterable: true, sortable: true, render: renderTime },
        { name: 'airline', displayName: Airline, inputFilterable: true, sortable: true },
        { name: 'destination', displayName: Destination, inputFilterable: true},
        { name: 'status', displayName: Status, inputFilterable: true}
    ];
    return (
        <FilterableTable
            namespace=Flights
            data={props.flights}
            pagersVisible={false}
            fields={fields}
            noRecordsMessage=There are no flights to display
            noFilteredRecordsMessage=No flights match your filters!
        />
    )
};

export default FlightComponent;    

Мой Контейнер:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap';
import classnames from 'classnames';
import { loadFlights } from '../actions/action';
import FlightsComponent from '../components/FlightsComponent';

class FlightsContainer extends  Component {
    constructor(props) {
        super(props);
        this.state = {
            activeTab: '1'
        };
        this.props.loadFlights('departure');
    }

    toggle(tab) {
        const filterType = tab === '1' ? 'departure' : 'arrival';
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
            this.props.loadFlights(filterType);
        }
    }

    render() {
        return(
            <div>
                <h2 className='App'>Copenhagen Airport's Flights</h2>
                <div sm=12 className=tab-section>
                    <Nav tabs className=m-3>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: this.state.activeTab === '1' })}
                                onClick={() => { this.toggle('1'); }}
                            >
                                Departures
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: this.state.activeTab === '2' })}
                                onClick={() => { this.toggle('2'); }}
                            >
                                Arrivals
                            </NavLink>
                        </NavItem>
                    </Nav>
                    <TabContent activeTab={this.state.activeTab}>
                        <TabPane tabId=1>
                            <Row>
                                <Col sm=12>
                                    <FlightsComponent {...this.props}/>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane tabId=2>
                            <Row>
                                <Col sm=12>
                                    <FlightsComponent {...this.props}/>
                                </Col>
                            </Row>
                        </TabPane>
                    </TabContent>
                </div>
            </div>
        )
    }
}
const mapDispatchToProps = {
    loadFlights
};
const mapStateToProps = (state) => {
    return {
        flights: state.flightReducer.flights
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(FlightsContainer);

Редуктор: index.js

import { combineReducers } from 'redux';
import flightReducer from './reducer';

export default combineReducers({
    flightReducer
});

Reducer.js

import {
    LOAD_FLIGHT_SUCCEED,
    LOAD_FLIGHT_FAILED
} from '../constant';

const initialState = {
    flights: [],
    error: false
};

export default function(state = initialState, action) {
    switch(action.type) {
        case LOAD_FLIGHT_SUCCEED:
            return {
                ...state,
                error: false,
                flights: action.flights
            };
        case LOAD_FLIGHT_FAILED:
            return {
                ...state,
                error: true
            };
        default:
            return state;
    }
}

LoadFlights

import { LOAD_FLIGHT } from '../constant';

export function loadFlights(filter) {
    return {
        type: LOAD_FLIGHT,
        filter
    }
}
Задан 20/10/2018 в 13:48
источник пользователем
На других языках...                            


1 ответов

голоса
0

Вы должны использовать метод отправки.

const mapDispatchToProps = {
   loadFlights
};

должно быть

const mapDispatchToProps = (dispatch) => {
  return {
       loadFlights: (p1) => dispatch(loadFlights(p1))
  }
};
Ответил 20/10/2018 в 14:31
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more