Question

当我加载页面时，我得到了

“Uncaught（in promise）TypeError：无法从reducer.js中读取未定义的属性'data'

问题是Actions.getResults()返回undefined。我深入研究 actions / api.js function makeRequest()并提出请求并获取数据。

console.log(responseAction)之前的{p> store.dispatch(responseAction)表示它包含所有数据，但Actions.getResults()返回未定义的数据。

我怀疑它可能与异步操作有关，但我无法弄清楚究竟是什么错误。任何帮助将不胜感激。

index.jsx

const Actions = require('./actions');
const React = require('react');
const Results = require('./results.jsx');
const Store = require('./store');
const Qs = require('qs');

class SearchPage extends React.Component {
constructor(props) {
    super(props);
    const query = Qs.parse(this.props.location.search.substring(1));

    Actions.getResults(query);

    this.els = {};
    this.state = Store.getState();
}

componentWillReceiveProps(nextProps) {
    const query = Qs.parse(nextProps.location.search.substring(1));
    Actions.getResults(query);
}

componentDidMount() {

    this.unsubscribeStore = Store.subscribe(this.onStoreChange.bind(this));
}

onStoreChange() {
    this.setState(Store.getState());
}
render() {
    return (                  
            <Results data={this.state.results.data} />        
    );
}
}
module.exports = SearchPage;

actions.js

const ApiActions = require('../../../../actions/api');
const Constants = require('./constants');
const Store = require('./store');

class Actions {
static getResults(data) {

    ApiActions.get(
        '/api/admins',
        data,
        Store,
        Constants.GET_RESULTS,
        Constants.GET_RESULTS_RESPONSE
    );
}
module.exports = Actions;

减速器/ results.js

const Constants = require('../constants');

const initialState = {
hydrated: false,
loading: false,
error: undefined,
data: [],
pages: {},
items: {}
};
const reducer = (state = initialState, action) => {

switch (action.type) {

    case Constants.GET_RESULTS:
        return Object.assign({}, state, {
            hydrated: false,
            loading: true
        });
    case Constants.GET_RESULTS_RESPONSE:
        return Object.assign({}, state, {
            hydrated: true,
            loading: false,
     error>>data: action.response.data,
            pages: action.response.pages,
            items: action.response.items
        });

    default:
        return state;
}
};


module.exports = reducer;

/actions/api.js

const JsonFetch = require('../helpers/json-fetch');

class Actions {
static get(url, query, store, requestType, responseType) {

    const request = { method: 'GET', url, query };

    return this.makeRequest(request, store,requestType, responseType);
}



static async makeRequest(request, store, requestType, responseType) {

    store.dispatch({ type: requestType, request });

    const responseAction = { type: responseType };

    try {
        responseAction.data = await JsonFetch(request);
    }
    catch (error) {
        console.warn(`API: ${request.method} ${request.url}:`, error);

        responseAction.error = error;
    }

 >>>> console.log(responseAction) = Object
    store.dispatch(responseAction);
 >>>> console.log(responseAction) = nothing

    return responseAction;
}
}
module.exports = Actions;

store.js

const Redux = require('redux');
const Results = require('./reducers/results');


module.exports = Redux.createStore(
Redux.combineReducers({
    results: Results
})
);

Answer 1

1）getResults方法不返回任何内容。它应该返回接受结果的承诺

2）SearchPage构造函数是同步的，因此您试图同步获取异步函数的结果。在这里，您将创建请求 - 然后尝试从商店获取状态，并且完成后续请求并更新您的商店。

从Redux商店获取未定义

1 个答案: