0

我不明白为什么我一开始得到 undefined 之后我得到正确的数据，也因为我在 componentDidMount() 中得到 undefined 我无法在这里收集数据所以如果有人知道如何解决这个问题请帮助我，我也使用redux-dev-tools 在那里我得到了正确的数据，但是在控制台上我得到了如下所示的数据

动作.js

import * as actionTypes from '../actions/actionTypes';

export const fetchToursSuccess = ( tours ) => {
    return {
        type: actionTypes.FETCH_TOURS_SUCCESS,
        tours: tours
    };
};

export const fetchToursFail = ( error ) => {
    return {
        type: actionTypes.FETCH_TOURS_FAIL,
        error: error
    };
};

export const fetchToursStart = () => {
    return {
        type: actionTypes.FETCH_TOURS_START
    };
};


export const fetchTours = () => {
    return dispatch => {
        dispatch(fetchToursStart());
            fetch('http://localhost:5000/api/v1/tours')
            .then(response => {
                if (response.status !== 200) {
                  throw new Error('Failed to fetch tours.');
                }
                return response.json();
            })
            .then( resData => {
                const fetchedTours = [];
                for ( let key in resData.data.data ) {
                    fetchedTours.push( {
                        ...resData.data.data[key],
                        id: key
                    } );
                }
                console.log(fetchedTours);
                dispatch(fetchToursSuccess(fetchedTours));
            } )
            .catch( err => {
                dispatch(fetchToursFail(err));
            });
    };
};

减速器.js

import * as actionTypes from '../actions/actionTypes';
import { updateObject } from '../utility';

const initialState = {
    tours: [],
    loading: false,
    isLoaded: false,
};

const fetchToursStart = ( state, action ) => {
    return updateObject( state, { loading: true } );
};

const fetchToursSuccess = ( state, action ) => {
    return updateObject( state, {
        loading: false,
        isLoaded: true,
        tours: action.tours

    } );
};

const fetchToursFail = ( state, action ) => {
    return updateObject( state, { loading: false } );
};

const reducer = ( state = initialState, action ) => {
    switch ( action.type ) {
        case actionTypes.FETCH_TOURS_START: return fetchToursStart( state, action );
        case actionTypes.FETCH_TOURS_SUCCESS: return fetchToursSuccess( state, action );
        case actionTypes.FETCH_TOURS_FAIL: return fetchToursFail( state, action );
        default: return state;
    }
};

export default reducer;

组件概览.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

// import axios from '../../axios-orders';

import * as actions from '../store/actions/index';
import { fetchTours } from '../store/actions/tour';

class Overview extends Component {
    componentDidMount () {
        console.log( this.props.onFetchTours());
        console.log( this.props.tours);
    }

    render () {
        if ( this.props.loading ) {
            console.log('Loading..........');
        }


        return (
            <div>
                hello from Overview
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
      tours: state.tours,
      loading: state.loading,
      isLoaded: state.isLoaded

    };
  };

const mapDispatchToProps = dispatch => {
    return {
        onFetchTours: () => dispatch( actions.fetchTours() )
    };
};


export default connect( mapStateToProps, mapDispatchToProps )( Overview );

我得到下一个结果，

Overview.js:12 undefined
Overview.js:13 []
Overview.js:49 Loading..........
tour.js:131 (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Overview.js:53 (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
4

0 回答 0