Question

为什么无法访问componentDidMount中的this.state.board？据我所知，一旦组件被渲染，componentDidMount将在之后立即触发，并且仅触发一次。

我正在尝试设置Google Analytics电子商务跟踪器，因此我认为设置它的最佳位置将在componentDidMount中，因为它确保仅跟踪一次GA跟踪器。但是，我无法访问任何状态数据以发送回GA。有什么想法吗？

    //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不是一种可靠的调试方法 - 该方法是异步的，实际上可以在您设置监听器之后调用，或者甚至在它注册的回调（影响状态）之后调用触发，所以使用调试器。另外，请尝试注释掉Editor.addChangeListener(this._onChange);行，看看是否会导致问题。

访问componentDidMount中的状态数据

1 个答案: