Question

我需要如何解决此错误的指导。该代码应该在执行操作和服务时从WebAPI获取结果。在操作中是错误所在的调度。在我的操作页面上，它应该为WebAPI调用服务，并依赖于分发给化简器的响应来执行操作。该代码未通过jobActions.getjobs（）中的第一次调度

从中收到的错误是：

未处理的拒绝（TypeError）：_actions_job_actions__WEBPACK_IMPORTED_MODULE_1 __。jobActions.getJobs（...）。则不是函数

Page Load
import React from 'react';
import { jobActions } from '../../actions/job.actions';

class LoadTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
        }
    }
         componentDidMount() {
        this.props.getJobs()
            .then((res) => {
                this.setState({ data: res.response || [] })
            });
    }
render() {
return ();
}
 const mapDispatchToProps => dispatch => ({ getJobs: () => dispatch(jobActions.getJobs()) });
export default connect(mapDispatchToProps)( LoadTable );  
===============================================
Actions
import { jobConstants } from '../constants/job.constants';
import { jobService } from '../services/job.service';

export const jobActions = {
    getJobs
};
let user = JSON.parse(localStorage.getItem('user'));
function getJobs() {     
    return dispatch => {        
        dispatch(request());
        return jobService.getJobs()
            .then(
                results => {                    
                    dispatch(success(user));
                    return { results };
                },
                error => {
                    dispatch(failure(error));
                }
            );
    };
    function request() { return { type: jobConstants.JOB_REQUEST }; }
    function success(user) { return { type: jobConstants.JOB_SUCCESS, user }; }
    function failure(error) { return { type: jobConstants.JOB_FAILURE, error }; }
 }

=======================================================
services
export const jobService = {
  getJobs
};

const handleResponseToJson = res => res.json();
function getJobs() {

    return fetch('http://localhost:53986/api/jobs/getoutput')
        .then(handleResponseToJson)
        .then(response => {
            if (response) {
                return { response };
            }
        }).catch(function (error) {
            return Promise.reject(error);
        });
}

结果应该是服务页面中的表数据，操作页面将根据阶段进行分配。

Answer 1

我假设您正在使用某种中间件，例如redux-thunk？如果不是，那么您的动作创建者将返回一个纯Redux不支持的功能

我猜你是这样做的，因为错误表明动作创建者在调用后返回未定义

    function getJobs() {    
    console.log("test -1");
    return dispatch => {
        console.log("test-2");
        dispatch(request());
        jobService.getJobs()  // <==== here comes the promise, that you don't return
     // return jobService.getJobs()  <== this is the solution
            .then(
                results => {
                    console.log("test -3");
                    dispatch(success(user));
                    return { results };
                },
                error => {
                    dispatch(failure(error));
                }
            );
    };

更新：您还需要在mapDispatchToProps中映射动作

Page Load
import React from 'react';
import { jobActions } from '../../actions/job.actions';

class LoadTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
        }
    }
     componentDidMount() {
       this.props.getJobs() // as the name of mapDispatchToProps says, you mapped your action dispatch
                            // to a getJobs prop, so now you just need call it
            .then((res) => {
                this.setState({
                    data: res.response || []
                })            
            }));      
    }

render() {
return ();
}
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
  // this function will dispatch your action, but it also mapps it to a new prop - getJobs
  getJobs: () => dispatch(jobActions.getJobs()) 
});
export default connect(mapStateToProps, mapDispatchToProps)( LoadTable );

如何解决ReactJS中的Promise错误

1 个答案: