Zugreifen auf Statusdaten in ComponentDidMount

Question

Warum ist es nicht möglich, auf this.state.board in ComponentDidMount zuzugreifen? Sobald die Komponente gerendert wurde, wird componentDidMount unmittelbar danach und nur einmal ausgelöst.

Ich versuche, einen Google Analytics E-Commerce-Tracker einzurichten, und daher dachte ich, der beste Ort zum Einrichten wäre innerhalb der KomponenteDidMount, weil es gewährleistet, dass der GA-Tracker nur einmal aufgerufen wird. Ich bin jedoch nicht in der Lage, auf die Statusdaten zuzugreifen, um sie an GA zurückzusenden. Irgendwelche Ideen?

//function which establishes state 
    function getEditorState() { 
     var board = Editor.getCsb(); 
     var similarBoard = Editor.getSimilarLsbs(); 
     return { 
      board: board, 
      similarBoard: similarBoard, 
      editing: Editor.isEditing(), 
      hoverColor: Editor.getHoverColor(), 
      variant: Editor.variant(), 
      lidAndLsb: Editor.getLidAndLsb() 
     }; 
    } 



    //component  
    var CsbEditorApp = React.createClass({ 

      getInitialState: function() { 
       return getEditorState(); 
      }, 

      componentDidMount: function() { 
       console.log(this.state.board); // <---- this returns an empty object. 
       Editor.addChangeListener(this._onChange); 
       SbAction.loadCsb(this.props.params.cid); 
      }, 

      render: function() { 
      console.log(this.state.board); // <---- this returns the the board object with data. 
      return (
      <div className={cm('lightbox sb-bg overlay-border')} ref="app"> 
       <Header board={this.state.board} label={this.state.label} socialLinkStatus={this.state.socialLinkStatus} buyingAll={this.state.buyingAll} /> 
       <div className="viewer-content"> 
        <div id="csb-content"> 
         <MetaText className="meta-author" metaKey="author" board={this.state.board} /> 
         <BoardMeta board={this.state.board}/> 
         <CsbPanel board={this.state.board hoverColor={this.state.hoverColor} showPanel={showPanel} /> 

         <RouteHandler/> 
        </div> 
       </div> 
      </div> 
     ); 
    }, 
_onChange: function() { 
     this.setState(getEditorState()); 
     $("#cc_hover").hide(); 
    } 
}); 

Answer 1

console.log keine zuverlässige Methode der Fehlersuche ist - das Verfahren ist async und kann tatsächlich aufgerufen, nachdem Sie Ihre Zuhörer oder sogar nach dem Rückruf registriert sie festgelegt haben (die den Zustand betrifft) ausgelöst wurde, benutze den Debugger. Versuchen Sie auch, die Editor.addChangeListener(this._onChange); Zeile auskommentieren und sehen Sie, ob es das Problem verursacht.