Question

我正在寻找工作。我的目标是根据用户的搜索查询通知用户何时没有可用的工作。我知道没有可用的作业时服务器会发送状态204。我的工作是在收到状态204时显示一条适当的消息，但我无法执行此操作。

我在fetchJobs（）函数中尝试了多种方法来处理204状态。但是，它们都不起作用-我仍然从JobsComponent.js看到RenderJobs函数中的错误。

我的ActionCreator.js是这样的：

export const fetchJobs = (address, job) => async (dispatch) => {
    dispatch(jobsLoading());
    var addressObj = JSON.parse(JSON.stringify(address));
    var obj = {"origin": [addressObj.lng, addressObj.lat], "job_details": [job]};
    const apiUrl = baseUrl + 'api/jobs/available_jobs';
    return fetch(apiUrl, {
    method: 'POST',
    body: JSON.stringify(obj),
    headers:{
    'Content-Type': 'application/json'
  }
})
    .then(response => {
    if (response.ok && response.status == 200) {
      return response;
    }
    else if (response.ok && response.status == 204) {
       dispatch(noJobsAvailable());
       return;
    }
    else {
      var error = new Error('Error is: ' + response.status + ': ' + response.statusText);
      error.response = response;
      throw error;
    }
  },
      error => {
            var errmess = new Error(error.message);
            throw errmess;
      })
    .then(response => response.json())
    .then(jobs => dispatch(addJobs(jobs)))
    .catch(error => dispatch(jobsFailed(error.message)));
};

export const noJobsAvailable = () => ({
    type: ActionTypes.NO_JOBS_AVAILABLE
});

这是我的减速器

import * as ActionTypes from '../ActionTypes';

const initialState = {
    jobs: [],
    isLoading: true,
    noJobs: false,
    errMess: null
  };

export const jobs = (state = initialState, action) => {
    switch (action.type) {
        case ActionTypes.GET_JOBS:
            return {...state, isLoading: false, noJobs:false, errMess: null, jobs: action.payload};

        case ActionTypes.JOBS_LOADING:
            return {...state, isLoading: true, noJobs:false, errMess: null, jobs: []}

        case ActionTypes.NO_JOBS_AVAILABLE:
            return {...state, isLoading: false, noJobs: true, errMess: null, jobs: []}

        case ActionTypes.JOBS_FAILED:
            return {...state, isLoading: false, noJobs:false, errMess: action.payload};

        default:
          return state;
      }
};

这是JobsComponent.js中的RenderJobs函数：

function RenderJobs(props) {
    var json = JSON.parse(props.jobsData);
    //create a sorted array based on 'json', called sort_array
    const renderJobItem = ({item}) => {
        //process the API response for displaying it
        return (
        //component for displaying the API response
    }

if (props.isLoading) {
    return (
            <Loading /> //custom loading component
    );
}
else if (props.noJobs) {
    return (
        <View style={styles.errorView}>
        <Text style={styles.errorTextStyle}>No jobs available</Text>                                           
    </View>
    )
}
else if (props.errMess) {
    return(
        <View style={styles.errorView}>
            <Text style={styles.errorTextStyle}>An error occurred</Text>
        </View>
    );
}
else {
    return (
        <FlatList 
                data={sort_array}
                renderItem={renderJobItem}
                keyExtractor={(item, index) => index.toString()}
                style={{marginTop: 10}}
                />
    );
}

}

当前发生的情况是

第一次调用JobsComponent.js中的RenderJobs函数时，props.noJobs标志为 true ，props.errMess为 null 。
第二次调用我的RenderJobs函数时，props.noJobs标志为 false 和props.errMess-“ undefined不是对象（评估'response.json' ）”

我不明白为什么会发生步骤2。我希望通话在步骤1结束。

如果有人能帮助解决这一难题，我将非常感激。：）

没有可用的作业时无法显示状态

0 个答案: