Reactjs: Wie abrufen von Daten zu laden, um die Komponente montiert ist?

Etwas seltsames ist passiert, ich habe gelesen das Reagieren docs und Sie sprechen über die Lebensdauer und wie Sie tun können, somestuff, bevor die Komponente gerendert wird. Ich bin versucht, aber alles was ich versuche scheitert, immer die Komponente ist die render-ersten und nach dem aufrufen componenWillMount, ..didMount, etc.. und nach dem Aufruf von Funktionen, die render wieder passiert.

Brauche ich um die Daten zu laden, um zu füllen, die der Staat denn ich will nicht ursprünglichen Zustand zu null möchte ich es mit den Daten, die seit dem ersten rendering.

Ich bin mit Flux und Alt, hier ist die

Aktion

@createActions(flux)
class GetDealersActions {

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

  getDealers (data) {
    const that = this;
    that.dispatch();
    axios.get(`${API_ENDPOINT}/get-dealers/get-dealers`)
      .then(function success (response) {
        console.log('success GetDealersActions');
        that.actions.dealerDataSuccess({...response.data});
      })
  }
}

dann die store

@createStore(flux)
class GetDealersStore {

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

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

}

und die Komponente

@connectToStores
export default class Dealers extends Component {

  static propTypes = {
    title : React.PropTypes.func,
  }

  static contextTypes = {
    router : React.PropTypes.func,
  }

  constructor (props) {
    super(props);
    this.state = {
      modal : false,
      dealerData : this.props.dealerData,
    }
  }

  componentWillMount () {
    GetDealersActions.getDealers();
    this.setState({
      dealerData : this.props.dealerData.dealersData,
    })
  }

  static getStores () {
    return [ GetDealersStore ];
  }

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

  render () {

    return (<div>
          <div style={Styles.mainCont}>
            {!!this.props.dealerData ?
              this.props.dealerData.dealersData.map((dealer) => {
                return (<div>HERE I AM RENDERING WHAT I NEED</div>);
              }) : <p>Loading . . .</p>
            }
          </div>
      </div>
    );
  }

}

wie Sie sehen können in das Bauteil habe ich diese

  constructor (props) {
    super(props);
    this.state = {
      modal : false,
      dealerData : this.props.dealerData,
    }
  }

  componentWillMount () {
    GetDealersActions.getDealers();
    this.setState({
      dealerData : this.props.dealerData.dealersData,
    })
  }

sagt mir, dass dealerData is undefined oder can not read property of null.

Alles was ich brauche, ist zu wissen, eine Technik, wo kann ich das abrufen der Daten vor der erstmaligen macht Auftritt. So kann ich ausgefüllt state und start arbeiten mit diesen Daten.

  • Eine Verwandte Frage: stackoverflow.com/q/30329418/1233251
  • da ist mein Problem: Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change. dass hat mich verwirrt.
  • in meinem code habe ich bereits, fügen Sie eine bedingte Anweisung und alles in Frage stellen und nicht arbeiten. Siehe meinen code, versuchen Sie, mir zu helfen, bitte.
  • Sie haben wahrscheinlich eine Art Fehler, der verhindert, dass das Programm ordnungsgemäß ausgeführt.
InformationsquelleAutor Non | 2015-10-12
Schreibe einen Kommentar