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ではないと考える。 2回目はそれが真実になっています。

Answer 1

プロパティ 'isLoading'は必要ありません。あなたのデータがあり、持っていない2つのケースを処理します。レデューサを介してデータを渡した後にコンポーネントが更新されるため、この条件をrender（）関数に設定します。構文は次のようになります。

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