Question

初始渲染的状态是初始状态。我使用的是componentWillMount（），但是如果没有先检查组件是否已挂载，它将无法工作。使用rawMarkup（）时的结果是一个空的初始状态对象。一切都在重新渲染时正常运行，但想知道为什么状态中的post对象在初始渲染时仍然是空的。有没有更好的方法来实现这一目标？谢谢。

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?），或者找出一种方法来优雅地处理初始渲染中没有数据（推荐）。

Reactjs在初始渲染之前的安装状态还是保持不变？

1 个答案: