Обновить состояние при просмотре загрузок

Question

Впервые работая с React, мне нужно знать, как обновлять состояние при загрузке представления.

Все, что я пытаюсь сделать, это запрос GET, чтобы получить список дилеров для игры в казино. В принципе, мне не хватает 1 или 2 шага, которые для визуализации списка дилерского находятся в DOM

Я покажу, что я делаю с моим кодом, и после этого я объясню, что я хочу

здесь является первым шаг в действиях части

getDealerActions.js

class GetDealersActions { 

    constructor() { 
    this.generateActions('dealerDataSuccess', 'dealerDataFail'); 
    } 

    getDealers (data) { 
    const that = this; 
    that.dispatch(); 
    axios.get('someroute/get-dealers/get-dealers') 
     .then(function success (response) { 
     that.actions.dealerDataSuccess({...response.data}); 
     }) 
    } 
}; 

тогда мы переходим к магазинам

getDealersStore.js

class GetDealersStore { 

    constructor() { 
    this.state = { 
     dealerData : null, 
    }; 
    } 

    @bind(GetDealersActions.dealerDataSuccess) 
    dealerDataSuccess (data) { 
    this.setState({ 
     dealerData : data, 
    }); 
    console.log(this.state.dealerData); 
    } 
} 

в этом случае console.log(this.state.dealerData); возвращает что-то вроде этого, которое является именно то, что мне нужно

Object {dealersData: Array[3]} 

проблемы приходит в составную часть, если честно, потому что я не знаю как обрабатывать данные там

class Dealers extends Component { 

     constructor (props) { 
     super(props); 
     } 

     static getStores() { 
     return [ GetDealersStore ]; 
     } 

     static getPropsFromStores() { 
     return GetDealersStore.getState(); 
     } 

     render() { 
     // here need to implement the .map function but 
     // as this.props.dealerData is null, I am unable to render it. 
     return (
      <div> 
      <ActionButton onClick={this._getDealers}>Test</ActionButton> 
      //in some part here I need to render the list of dealers 
      </div> 
     ); 
     } 

     _getDealers =() => { 
     console.log(this.props.dealerData); 
     GetDealersActions.getDealers(); 
     } 

    } 

это console.log(this.props.dealerData); возвращает null в первый раз, я должен нажать дважды на _getDealers(), чтобы получить эту

{params: Object, query: Object, dealerData: Object}

так, что я должен делать в методе визуализации, чтобы получить dealerData заполняли? и что мне делать, чтобы обновить состояние, когда я нахожусь в представлении?

Если у вас есть это, все, что мне нужно, это получить this.props.dealerData с данными, а не null. Поэтому я могу сделать это в этом представлении.

Answer 1

Как это должно быть структурировано является:

class Dealers extends Component { 
    constructor(props) { 
    super(props); 
    } 
    componentDidMount() { 
    GetDealersActions.getDealers(); 
    } 
    render() { 
    let content; 
    if (this.state.dealerData) { 
     content = this.state.dealerData.map((datum) => { 
     return <div>TODO: JSX!</div>; 
    ); 
    } else { 
     content = <div>Loading . . .</div>; 
    } 
    return <div>{content}</div>; 
    } 
}