Por que os dados de API não são mostrados em uma tabela em ReactJS aplicativo

votos
0

Estou construindo um aplicativo ReactJS que deve mostrar uma tabela preenchida a partir de dados de uma API. A API contém dados voos dividido pelo chegadas / partidas. Eu não estou recebendo qualquer erro neste momento, mas uma tela vazia sem as linhas. Eu não tenho certeza do que eu fiz de errado. Na guia Rede, em ferramentas de desenvolvimento, eu vejo o JSON com todos os dados para que eu tenho certeza que a API é processado. Mas em nada tela e sem erros de Reagir. I preso com isso. Eu compartilhei o código se algo que eu estou ausente I irá editar acrescentando o que você vai precisar se algo não está claro.

O JSON Eu estou começando (apenas uma amostra):

{
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
},

Meu Componente:

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;    

Meu Container:

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);

Redutor: 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
    }
}
Publicado 20/10/2018 em 13:48
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Você deve usar o método de envio.

const mapDispatchToProps = {
   loadFlights
};

deveria estar

const mapDispatchToProps = (dispatch) => {
  return {
       loadFlights: (p1) => dispatch(loadFlights(p1))
  }
};
Respondeu 20/10/2018 em 14:31
fonte usuário

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