Reactjs 道具在渲染中可用但在 componentDidMount 中不可用

Question

我遇到了一个奇怪的问题。当我从这个 class 调用 "UserShowStatsSuggestions" 时：

var UserShowStatsPanelBody = React.createClass({
    getInitialState: function() {
        return {data: []};
    },
    componentDidMount: 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>
        );
    }
});

我可以在渲染中访问道具 "showID"，但不能在 componentDidMount:

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

来自 componentDidMount console.log:

{userID: "107050829081899378766", showID: undefined}

来自渲染console.log

{userID: "107050829081899378766", showID: 5705241014042624}

知道为什么会这样吗？

Answer 1

看看render中的console.log是否执行了不止一次。

componentDidMount 只运行一次，因此您永远不会看到另一个 console.log 在 componentDidMount 中使用正确的 showID 执行。

但是，渲染运行不止一次，所以您会在 parents 状态更新后看到 console.log，其中 showId 不再为空。

修改 parents 渲染方法，使其在 ajax 调用完成之前不渲染。

Reactjs 道具在渲染中可用但在 componentDidMount 中不可用

Reactjs prop available in render but not in componentDidMount

javascript

reactjs