Question

我有一个reactjs应用，应该从WepAPI返回数据。我在函数上调用的调度似乎给了我这个错误：TypeError：无法读取未定义的属性'then'

我通过调度使用了其他功能，但效果很好，但是这个功能仍然很突出。

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

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...

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

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

1 个答案: