Нужна помощь в получении данных из API и их отображении, React-Redux thunk

Question

Я новичок и все еще учусь, и я столкнулся с проблемой, и у меня недостаточно знаний для ее решения.

У меня есть настройка API с Flask и возвращается маршрут / / api / stats "массив данных, которые я хочу отобразить.Я следовал руководству, но мне трудно внедрить его в мой код.

Logger показывает начало действия «fetchDev», затем fetchDev вызывает действие «startDevSearch», чтобы увидеть его в консоли, состояние isFetching в «startDevSearch» становится истиннымиз false, а затем я получаю ошибку "TypeError:" e is undefined "и вскоре после" Ошибка сети ". Я прослушал трафик с помощью Fiddler, и браузер успешно отправляет запрос" http://127.0.0.1/api/stats" и получает ответ, который я не знаю, какрешить это.Я не хочу, чтобы меня обманывают, но просто скажи мне, что не так, и я отправлюсь оттуда, сейчас я не знаю.Большое спасибо

Actions.js:

import axios from "axios";

export const selectAd = (ad) => {
    console.log("You clicked on ad: ", ad.id);
    return {
        type: "AD_SELECTED",
        payload: ad
    };
}
export let startDevSearch = () => {
    return {
        type: "Start_Dev_Search"
    }
}


export let endDevSearch = (devsArray) => {
    return {
        type: "End_Dev_Search",
        devsArray
    }
}

export let fetchDev = () => {
    let url = "http://127.0.0.1:5000/api/stats"
    return (dispatch) => {
        dispatch(startDevSearch())
        return axios.get(url).then(
            (response) => {
                dispatch(endDevSearch(response.data))
            },
            (err) => {
                console.log(err);
            }
        )
    }
}

Reducer.js:

export let devsReducer = (state={isFetching : false, devsArray : []},action) => {
    switch(action.type){
        case 'Start_Dev_Search':
            return {
                isFetching : true
            }
        break;

        case 'End_Dev_Search':
            return{
                isFetching : false,
                devsArray : action.devsArray
            }
        break;
        default:   
            return state;
    }
}

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

import {combineReducers} from 'redux';
import {devsReducer} from "./adsReducer";


const allReducers = combineReducers({
    ads: devsReducer,
});

export default allReducers;

Container.js

import React, {Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from 'redux';
import {selectAd} from "../actions/adsActions";
import {fetchDev} from "../actions/adsActions"

class AdsList extends Component {

    componentWillMount() {
        this.props.fetchDev();
    }

    renderList(ad) {
            return (
            <a key={ad.id} onClick={() => this.props.selectAd(ad)} className="list-group-item list-group-item-action flex-column align-items-start">
            <div className="d-flex w-100 justify-content-between">
            <h5 className="mb-1">{ad.text}</h5>
            <small className="text-muted">{ad.date}</small>
            </div>
            </a>
            )
    }


    render() {

        if(this.props.isFetching == true) {
            return <p>Loading</p>
        }
        else if (this.props.isFetching == false && this.props.devsArray.length >= 1) {
            return (
            <div>
            {this.props.devsArray.map(this.renderList)}
            </div>
        );
        }

    }

}

function matchDispatchToProps(dispatch){
    return bindActionCreators({selectAd: selectAd, fetchDev: fetchDev}, dispatch);
}


export default connect(null, matchDispatchToProps)(AdsList);

Component.js:

import React from "react";
import AdsList from "../containers/AdsList";

const App = () => {
    return (
        <div>
        <AdsList/>
        <hr />
        </div>
    );

};

export default App;

store.js:

import {createStore, combineReducers, applyMiddleware} from "redux";
import {createLogger} from 'redux-logger'
import thunk from "redux-thunk";
import allReducers from "./reducers";

export default createStore(
    allReducers,
    applyMiddleware(createLogger(), thunk)
);

index.js:

import {render} from "react-dom";
import React from "react";
import {Provider} from "react-redux";
import App from "./components/Main";
import store from "./store"

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("content"));

Answer 1

Вы должны добавить метод mapStateToProps в свой компонент и объявить его как параметр в вашем методе подключения (где вы объявили ноль).

Пример: функция mapStateToProps (state, props) {return ( переменная состояния : получить соответствующую переменную состояния)}