javascript - Reactjs prop available in render but not in componentDidMount - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm having a weird issue. When I call "UserShowStatsSuggestions" from this class:

var UserShowStatsPanelBody = React.createClass({
    getInitialState: function() {
        return {data: []};
    },
    ponentDidMount: function() {
        // Get the show
        var showUrl = "/api/v1/show/" + this.props.showStats.show + "/";
        $.ajax({
            url: showUrl,
            dataType: 'json',
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render: function() {
        var statElements = [];
        // Create the user show stats
        if (this.props.showStats) {
            var showID = this.state.data.id;
            var showLink = "/leaderboards/show/" + showID + "/";
            var recapLink = "/recap/" + this.state.data.id + "/";
            statElements.push(<div className="row"></div>);
            statElements.push(<div className="row"></div>);
            statElements.push(<div className="row"></div>);
            statElements.push(<UserShowStatsSuggestions userID={this.props.userID} showID={showID} />);
            statElements.push(<div className="row"></div>);
        }

        return (
            <div>{statElements}</div>
        );
    }
});

I can access the prop "showID" in render, but not in ponentDidMount:

var UserShowStatsSuggestions = React.createClass({
    getInitialState: function() {
        return {data: []};
    },
    ponentDidMount: function() {
        console.log(this.props);
    },
    render: function() {
        console.log(this.props);
        return (
            <div></div>
        );
    }
});

From ponentDidMount console.log:

{userID: "107050829081899378766", showID: undefined}

From render console.log

{userID: "107050829081899378766", showID: 5705241014042624}

Any ideas why this would be the case?

I'm having a weird issue. When I call "UserShowStatsSuggestions" from this class:

var UserShowStatsPanelBody = React.createClass({
    getInitialState: function() {
        return {data: []};
    },
    ponentDidMount: function() {
        // Get the show
        var showUrl = "/api/v1/show/" + this.props.showStats.show + "/";
        $.ajax({
            url: showUrl,
            dataType: 'json',
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render: function() {
        var statElements = [];
        // Create the user show stats
        if (this.props.showStats) {
            var showID = this.state.data.id;
            var showLink = "/leaderboards/show/" + showID + "/";
            var recapLink = "/recap/" + this.state.data.id + "/";
            statElements.push(<div className="row"></div>);
            statElements.push(<div className="row"></div>);
            statElements.push(<div className="row"></div>);
            statElements.push(<UserShowStatsSuggestions userID={this.props.userID} showID={showID} />);
            statElements.push(<div className="row"></div>);
        }

        return (
            <div>{statElements}</div>
        );
    }
});

I can access the prop "showID" in render, but not in ponentDidMount:

var UserShowStatsSuggestions = React.createClass({
    getInitialState: function() {
        return {data: []};
    },
    ponentDidMount: function() {
        console.log(this.props);
    },
    render: function() {
        console.log(this.props);
        return (
            <div></div>
        );
    }
});

From ponentDidMount console.log:

{userID: "107050829081899378766", showID: undefined}

From render console.log

{userID: "107050829081899378766", showID: 5705241014042624}

Any ideas why this would be the case?

• javascript
• reactjs

Share Improve this question Follow edited Mar 27, 2015 at 22:09 frederix asked Mar 27, 2015 at 21:46 frederixfrederix 1,86255 gold badges2121 silver badges3131 bronze badges 3

• Can't repro: jsfiddle/69z2wepo/4987 – Felix Kling Commented Mar 27, 2015 at 21:58
• 1 I can not reproduce either. Are you certain that the render method runs exactly once? Could you show the code that renders the UserShowStatsSuggestions Component? – Silfverstrom Commented Mar 27, 2015 at 22:00
• I just updated my post. I am pulling the "showID" from the state of another class. – frederix Commented Mar 27, 2015 at 22:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Look if the console.log in render is executed more than once.

ponentDidMount only runs once, so you will never see another console.log executed with the correct showID in ponentDidMount.

However, render runs more than once, so you would see the console.log after the parents state has been updated, where showId no longer is null.

Modify your parents render method to not render before your ajax call has been pleted.

本文标签： javascriptReactjs prop available in render but not in componentDidMountStack Overflow