reactjs - ヘルメットを使用してコンポーネントから非同期データを取得するには?

Question

React アプリで動的メタ タグを生成したいと考えています。私はヘルメットを使用していますが、Helmet.renderStatic() を呼び出した後に空であるため問題があります。私の index.js ファイル:

const store = createStore(rootReducer);

ReactDOM.render(<Provider store={store}><App /></Provider>,
  document.getElementById('root') as HTMLElement
);

const helmet = Helmet.renderStatic();
console.log('meta', helmet.meta.toString());

registerServiceWorker();

私のコンポーネントは次のようになります。

  public render() {
    const { article } = this.state;
    return (
      <div className="article-published">
          <Helmet>
            <meta charSet="utf-8" />
             <meta property="og:title" content={article.title} />
          </Helmet>

問題は、記事を取得するために API を呼び出していることです。そのため、index.js でヘルメットを取得しても記事はまだ存在しないため、helmel.meta にはコンテンツがありません。

記事がAPIから受信されるのを待ってタイトルに使用するにはどうすればよいですか?