javascript - 如何从包含大量数组的大 JSON 文件中发布必要的信息

Question

我正在尝试发布从 'http://localhost:3001/api' 获得的一些信息它采用以下格式:

我需要里面的信息:代理、行程、航段、航段

这是我的行动:

export function fetchLocals() { 
    return (dispatch) => { 

        dispatch({type: GET_LOCATIONS_START}); 
        axios.get('http://localhost:3001/api') 
        .then(function(response) { 
            dispatch({type: GET_DATA_AGENTS, payload: response.data.Agents}); 
            dispatch({type: GET_DATA_ITI, payload: response.data.Itinerarie}); 
            dispatch({type: GET_DATA_LEGS, payload: response.data.Legs}); 
            dispatch({type: GET_DATA_SEGMENTS, payload: response.data.Segments});
        })
        .catch(function (error) { 
            dispatch({type: GET_LOCATIONS_ERROR, payload: error}); 
        }); 

这是我的 reducer :

export default (state = [], action) => {
    const payload = action.payload
  
    switch (action.type) {       
        case GET_DATA_AGENTS: 
        state.agents = payload 
        return state; 
        //return [ payload.agents]

        case GET_DATA_ITI: 
        state.iti = payload 
        return state;
        //return [ payload.iti ]

        case GET_DATA_LEGS: 
        state.legs = payload 
        return state;
        //return [ payload.legs ]

        case GET_DATA_SEGMENTS: 
        state.segments = payload 
        return state;
        //case GET_DATA_SEGMENTS: [payload.segments]
    }
    return state;
}

和我的容器:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import moment from 'moment';

class SkyScannerList extends Component {

    renderFlights(flightData){
        console.log("I AM HERE NOW"); 
        console.log(flightData); 
        <div>Loading.....</div>
        //const result = flightData.data.length;     
        //console.log(flightData);  
    } 

    render(){
        return (
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Airline</th>
                        <th>Flight Number</th>
                        <th>From</th>
                        <th>To</th>
                        <th>Departure</th>
                        <th>Arrival</th>
                        <th>Cost</th>
                    </tr>
                </thead>
                {
                    this.props.skyScanner.map(this.renderFlights)
                }
            </table>
        );
    }

}

const mapStateToProps=({ skyScanner })=>{
    return { skyScanner };
};
/*
function mapStateToProps(skyScanner){
    return{
        Agents: state.Agents,
        Itinerarie: state.Itinerarie,
        Legs: state.Legs,
        Segments: state,Segments
    };
}
*/
export default connect(mapStateToProps)(SkyScannerList);

当我运行我的应用程序时，我可以在控制台下看到:

I AM HERE NOW

undefined

这意味着flightData未定义，它不会显示正在加载...。我正在尝试在我的容器中发布这 4 个数组的一些信息，但我认为我的 reducer 无法正常工作。有人可以帮助我并指出我的错误吗？

如何发布每个可用航类的 Agents、Legs、Segments 以及 Itinerarie 中的 InboundLegId 和 OutboundLegId 内的所有 ID？

我清楚自己想做什么吗？

Answer 1

您使用map()的方式是错误的。试试这个，让我知道这是否有帮助:

this.props.skyScanner.map((item) => this.renderFlights(item))

更新:

好的，我们聊天后。看起来你的 reducer 是错误的。

您需要返回一个初始状态。这是您的新 reducer 文件:

const initial_state={
    agents: [],
    iti: [],
    legs: [],
    segments: [],
    places: [],
    carriers: []
};

export default (state = initial_state, action) => {
    const payload = action.payload;
    switch (action.type) {
        case GET_DATA_AGENTS:
            return({
                ...state,
                agents: payload.Agents,
                iti: payload.Itineraries,
                legs: payload.Legs,
                segments: payload.Segments,
                places: payload.Places,
                carriers: payload.Carriers
            });
            break;
        default: return state;
    }
}

您不需要为数据中的每个项目进行调度。只需将操作更改为此即可。

dispatch({type: GET_DATA_AGENTS, payload: response.data}); 

您还需要更改您的 mapStateToProps 函数:

const mapStateToProps = (state) => {
    return {
        data: state.skyScanner
    }
}

现在只需传递给您的函数

this.renderFlights(this.props.data);