等待AJAX​​请求（React，Redux）

Question

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
        };

}

接下来，我需要：尽管响应还没有结束，但是我不需要显示数据。 条件，如果现在不起作用

第一次获取console.log时未定义-认为必须为false，但不能为false。 第二次成为现实。

Answer 1

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

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