javascript - Reactjs 在初始渲染之前安装状态还是保持原样？

Question

此处初始渲染的状态是初始状态。我正在使用 componentWillMount() 但是，如果不先检查组件是否已安装，它就无法工作。使用 rawMarkup() 时的结果是一个空的初始状态对象。重新渲染时一切正常，但想知道为什么状态内的后对象在初始渲染时仍然为空。有更好的方法来实现这一点吗？谢谢。

var Post = React.createClass({
propTypes: {
    source: React.PropTypes.string.isRequired,
},

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

getDefaultProps: function() {
    return {
        source: 'http://localhost:3000/api/posts/' + postSlug
    };
},

componentWillMount: function() {
    $.get(this.props.source, function(result) {
        if (this.isMounted()) {
            this.setState({post: result});
        }
    }.bind(this));
},

rawMarkup: function() {
    console.log(this.state.post);
    var rawMarkup = marked(this.state.post.body || '', {sanitize: true});
    return { __html: rawMarkup };
 },

render: function() {
    var post = this.state.post;
    var date = moment(post.date).format('MM[/]DD[/]YYYY');
    return (
        React.createElement('div', {style: {marginLeft: '115px'}},
            React.createElement('h1', {style: {marginTop: '50px'}}, post.title),
            React.createElement('h5', {style: {marginBottom: '25px'}}, date),
            React.createElement('span', {dangerouslySetInnerHTML: this.rawMarkup()})
        )
    );
}

});

Answer 1

默认情况下，jQuery get 请求是异步的，因此初始渲染发生在请求完成并调用 this.setState({post: result}) 之前。您可以使 get 请求同步( How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request? )，或者找出一种方法来优雅地处理初始渲染上的无数据(推荐)。