Javascript 等待AJAX请求（React、Redux）

需要在AJAX调用完成后显示数据

我的减速机：

import { INCOME_PROFILE } from '../actionTypes'
import Immutable from 'immutable'

const initialUserState = [];
const profileReducer = function(state = initialUserState, action) {
   //console.log('actiondata in reducer:' + action.data + action.type);

  switch(action.type) {

    case 'INCOME_PROFILE_IS_LOADING': 
     return Object.assign({}, state, {  hh: action.hasFetched });

  case 'INCOME_PROFILE': 
         return Object.assign({}, state, { course_list: action.data, hh: action.hasFetched });

  default: 

  return state;
  }
}
export default profileReducer

我的行动创造者：

export function GET_ITEM_REQUEST() {
  return {
    type: INCOME_PROFILE_IS_LOADING,
    hasFetched: false,
  }
}



function receiveData(json) {
    return{

        type: INCOME_PROFILE,
        data: json,
        hasFetched: true
    }
};

export function IncomeProfileList () {

    return dispatch => {

        return (

            axios.post(Api.getURI("profile"),{}, {
      headers: { 'X-Authenticated-Userid': '15000500000@1' }
     }).then(function (response) {


                //console.log(response.data);
                dispatch(receiveData(response.data.body));

            })
        .catch((error) => {
                console.log(error);
            })
            )
    }
}

我的组成部分：

class IncomeProfile extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.props.IncomeListProfile();
      }

render() {
console.log(this.props.isloading);

if (this.props.isloading) {
            return <p>Sorry! There was an error loading the items</p>;
        }
}
}
const mapDispatchToProps = function(dispatch) {
  return {
      IncomeListProfile: () => dispatch(IncomeProfileList())
      }
  }

const mapStateToProps = function(state) {
  //var mystore = state.toJS()
  var mystore = state.getIn(['incomeProfileList'])['course_list'];
  var mystored = state.getIn(['incomeProfileList']);
  console.log(mystored.hh);
  var copy = Object.assign({}, mystore);
  return {
    items: copy.course_list,
    isloading: mystored.hh
        };

}

class IncomeProfile扩展组件{
建造师（道具）{
超级（道具）
}
componentDidMount（）{
this.props.IncomeListProfile（）；
}
render（）{
console.log（this.props.isload）；
如果（此.props.isload）{
return抱歉！加载项目时出错
；
}
}
}
const mapDispatchToProps=功能（调度）{
返回{
IncomeListProfile:（）=>dispatch（IncomeProfileList（））
}
}
const mapStateToProps=函数（状态）{
//var mystore=state.toJS（）
var mystore=state.getIn（['incomeProfileList']）['course_list']；
var mystored=state.getIn（['incomeProfileList']）；
log（mystored.hh）；
var copy=Object.assign（{}，mystore）；
返回{
项目：复制课程列表，
isloading:mystored.hh
};
}

我需要下一步：虽然响应没有完成，但我不需要显示数据。条件如果现在不起作用

---

第一次获取未定义的console.log-think必须为false，但它不是state false。第二次，它变为现实。

您不需要属性“isLoading”-只需处理两种情况，即您有数据，而您没有数据。将此条件放在render（）函数中，因为组件将在通过reducer传递数据后刷新。在您的案例中，语法如下所示：

  render() {
    if(!this.props.items) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>Display your data!</div>
      ); 
    }
  }

render（）{
如果（！this.props.items）{
返回装载。。。；
}否则{
返回(
显示您的数据！
); 
}
}