如何解决类型错误：无法读取未定义的属性'then'的问题？

Question

我有一个ReactJS应用程序，该应用应该是从WEPAPI返回数据。我调用一个函数的调度似乎给了我这个错误：typeError：无法读取不确定的

的属性。

我已经通过调度使用了其他功能，而且效果很好，但它仍然伸出来。

预期的结果是使数据返回初始调度。目前，数据通过，但在返回初始呼叫时被卡住。

import React from 'react';
import { connect } from 'react-redux';
import { jobActions } from '../../actions/job.actions';
import Popup from 'reactjs-popup'
import JwPagination from 'jw-react-pagination';

class LoadTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pagination: [],
            Search: "Search",            
            sort: {
                column: null,
                direction: 'desc',
            },
        }
        this.clearSearch = this.clearSearch.bind(this);
        this.doSearch = this.doSearch.bind(this);
        this.doSort = this.doSort.bind(this);
        this.runLog = this.runLog.bind(this);
        this.openRunLog = this.openRunLog.bind(this);
        this.onChangePage = this.onChangePage.bind(this);
    }
    componentDidMount() {
        this.props.getJobs() 
            .then((res) => {
                this.setState({
                    data: res.results.response || []
                })
            });
    }
    clearSearch() {
        this.props.getJobs()
            .then((res) => {
                this.setState({
                    data: res.results.response || [], Search: "Search",                    
                    sort: {
                        column: null,
                        direction: 'desc',
                    }
                })
            });
    }
    doSearch(e) {
        const { name, value } = e.target;        
        this.setState({ [name]: value });        
        this.props.doSearch(value)<----Initial Call
            .then((res) => {                
                this.setState({
                    data: res.results.response || [],
                    sort: {
                        column: null,
                        direction: 'desc',
                    }                    
                })
            });
    }
   render() {
         return  (
use data
)}
const mapDispatchToProps = dispatch => ({    
    getJobs: () => dispatch(jobActions.getJobs()),
    doSearch(value) {
        dispatch(jobActions.doSearch(value));<----dispatch
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(LoadTable); 
==========================================
Action being called:
function doSearch(value) {     
    return (dispatch) => {
        dispatch({ type: jobConstants.JOB_REQUEST });
        return jobService.doSearch(value)
            .then(
            results => {
                    dispatch({ type: jobConstants.JOB_SUCCESS, user });
                     //Ran console logs and seen the results here
                    return { results };
                },
                error => {
                    dispatch({ type: jobConstants.JOB_FAILURE, error });                    
                }
            );
    }
}
=========================
Services
function doSearch(SearchValue) {
    const requestOptions = {
        method: 'POST',
        headers: new Headers({
            'Content-Type': 'application/json; charset=utf-8'
        }),
        body: JSON.stringify({SearchValue})
    };
    const requestPath = 'http://localhost:53986/api/jobs/postsearch';    
    return fetch(requestPath, requestOptions)
        .then(handleResponseToJson)
        .then(response => {  
            if (response) {
                return { response };
            }           
        }).catch(function (error) {            
            return Promise.reject(error);
        });
}

Answer 1

您需要一个异步功能来返回承诺。像这样

async function doSearch(val) {
const requestOptions = {
    method: 'POST',
    headers: new Headers({
        'Content-Type': 'application/json; charset=utf-8'
    }),
    body: JSON.stringify({SearchValue})
};
const requestPath = 'http://localhost:53986/api/jobs/postsearch';    
const data = fetch(requestPath, requestOptions);
const jsonData = await data.json();
return jsonData;
}

然后您可以这样称呼：

doSearch(val).then() // and so on...

这是您在这种情况下寻找的模式。