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