Question

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

我使用Flask进行API设置并路由＆＃34; / api / stats＆＃34;返回我想要显示的数据数组。我遵循了一个教程，但我很难将其实现到我的代码中。

记录器显示＆＃34; fetchDev＆＃34;动作开始，然后fetchDev调用动作＆＃34; startDevSearch＆＃34;可以在控制台中看到它，状态是在＆＃34; startDevSearch＆＃34;从false变为true然后我得到＆＃34; TypeError：＆＃34; e未定义＆＃34;错误和＆＃34;网络错误＆＃34;后不久我用Fiddler嗅到了流量，浏览器成功地向＆＃34; http://127.0.0.1/api/stats＆＃34;并获得响应我不知道如何解决它。我不想被骗，但只是告诉我什么是错的，我会从那里开始，现在我一无所知。非常感谢

Actions.js：

＆＃13;

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

＆＃13;

Reducer.js：

＆＃13;

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

＆＃13;

Reducer index.js：

＆＃13;

import {combineReducers} from 'redux';
import {devsReducer} from "./adsReducer";


const allReducers = combineReducers({
    ads: devsReducer,
});

export default allReducers;

＆＃13;

Container.js

＆＃13;

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

＆＃13;

Component.js：

＆＃13;

import React from "react";
import AdsList from "../containers/AdsList";

const App = () => {
    return (
        <div>
        <AdsList/>
        <hr />
        </div>
    );

};

export default App;

＆＃13;

store.js：

＆＃13;

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

＆＃13;

index.js：

＆＃13;

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

＆＃13;

Answer 1

您必须在组件中添加mapStateToProps方法，并将其声明为connect方法中的参数（您已声明为null）。

示例：function mapStateToProps（state，props）{ 返回（ 状态变量：获取相应的状态变量） }

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

1 个答案: