需要帮助从 API 获取数据并显示它，React-Redux thunk

Question

我是新手，还在学习，遇到了问题，但我没有足够的知识来解决它。

我使用 Flask 设置了 API，并且路由“/api/stats”返回我想要显示的数据数组。我遵循了一个教程，但我很难将它实现到我的代码中。

Logger 显示“fetchDev”动作开始，然后 fetchDev 调用动作“startDevSearch”可以在控制台中看到它，“startDevSearch”中的状态 isFetching 从 false 变为 true，然后我得到“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;
    }
}

reducer index.js：

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


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

export default allReducers;

容器.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);

组件.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 方法，并在您的连接方法中将其声明为参数（您已声明为 null）。

示例：函数 mapStateToProps (state,props){ 返回（ 状态变量：获取各自的状态变量 ) }