0

我有反应应用程序使用服务器端渲染。我使用react-helmet来显示动态元标记。一切都是完美的设置。动态元标记也正确显示给浏览器，但在服务器端它采用未定义的值。有没有人告诉我它的解决方案该怎么做。

例如 ：

var React = require('react');
var Helmet = require('react-helmet');

var About = React.createClass({
  getInitialState: function(){
    return {
      title: "",
      description: "",
    }
  },
  componentDidMount: function(){
    $.ajax({
      url: api_url+'/get_meta',
      type: 'POST',
      dataType: 'json',
      async: false,
      success: function( response ) {
        if( response.status==200 ){
          this.setState({title: response.title, description: response.title });
        }
      }
    });  
  },
  render: function() {
    var title = this.state.title;
    var description = this.state.description;
    return (
        <div>
          <Helmet
            title={title}
            meta={[
              {"name": "description", "content": description }
            ]}
          />
          <p>
            This is the title page
          </p>
        </div>
    );
  }
});

module.exports = About;

当我查看源代码时，它不会在元标记中显示任何内容，但是当我检查浏览器元素时，它会显示元标记值。经过一段时间的调试，我发现了问题，该组件同时呈现服务器端和客户端，因此在服务器端它仅呈现具有初始状态的组件，这就是为什么不显示该值的原因。

请任何人建议该怎么做？

4

0 回答 0